发布于 2016-11-01 12:38:12 | 116 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


这篇文章主要介绍了jquery简单图片切换显示效果实现方法,可以实现简单的图片切换功能,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jquery简单图片切换显示效果实现方法,分享给大家供大家参考。具体实现方法如下:

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>jquery图片切换效果</title>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

 $(function(){

  $("#item li:not(:first)").css("display","none");//只显示第一张图片,其它隐藏

  var bb = $("#item li:last");

  var aa = $("#item li:first");

  setInterval(function(){

   if(bb.is(":visible")){

    aa.fadeIn(1000).addClass("in");

    bb.hide();

   }else{

    $("#item li:visible").addClass("in");

    $("#item li.in").next().fadeIn(1000);

    $("#item li.in").fadeOut(1000).removeClass("in");

   }

  },3000);

 });

</script>

</head>

<style type="text/css">

li{list-style:none;display:block;width:500px;border:1px solid #ccc;padding:5px;}

.in{display:block;}

</style>

<body>

 <ul id="item">

  <li><img src="./images/11_b.jpg" /></li>

  <li><img src="./images/22_b.jpg" /></li>

  <li><img src="./images/33_b.jpg" /></li>

  <li><img src="./images/44_b.jpg" /></li>

 </ul>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务