图片轮播(类似Flash)jquery

来源：互联网发布：淘宝网集市商家热线编辑：程序博客网时间：2024/04/28 19:13

图片轮播

经常会看到很多网站有动态地切换图片，大都是都是使用Flash实现的，其它jquery+css+div也是可以实现的。

原理：

1.除了第一张图片，其它都隐蒇。

2.获取第一张图片的alt属性给赋给 title ，并且增加点击事件。

3.增加相应的点击按钮，并且使用jquery的fadeOut()和fadeIn()方法。

4.设置定时器setInterval，定时切换图片。

原码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> jquery实现图片的轮播 </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content=""> </head> <script type="text/javascript" src="jquery-1.9.js"></script> <script type="text/javascript">    $(document).ready(function(){            count = $(".list a").length-1;  //获取第一张图片中的alt内容赋给标题      $("#banner_title").html($(".list a:first-child").find("img").attr("alt"));             //点击图片右下角的 1，2，3，4 触发的事件      $("#banner li").click(function(){    var n = $(this).text();    $("#banner_title").html($(".list a").eq(n-1).find("img").attr("alt"));   $(".list a").filter(":visible").fadeOut(500).parent().children().eq(n-1).fadeIn(1000);       $("#banner").css("background","");          $(this).toggleClass("on");          $(this).siblings().removeAttr("class");  });  //设置自动播放      var n=0;  t = setInterval(showAuto,"2000");    //当鼠标经过时取消定时器，经过后再重新定时  $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval(showAuto,"2000");});      function showAuto()  {    //动态赋值给n n = n >=(count) ?0 : ++n;         $("#banner li").eq(n).trigger('click');  }; }); </script> <style type="text/css">   #banner   {     position:relative; width:400px; height:336px; overflow:hidden; margin:0 auto;   }   #banner_title   {     position:absolute;     bottom:0;     background-color:white;     height:30px;     filter:Alpha(Opacity=50);     opacity:0.3; z-index:1000;   }   #banner ul    {     margin-top:300px; margin-left:250px;     position:absolute;     list-style-type:none;     filter: Alpha(Opacity=80);     opacity:0.8;      border:1px solid #fff;     z-index:1002;   }   #banner ul li   {     padding:0px 8px;     float:left;     display:block;     color:#FFF;     border:white 1px solid;     background:blue;     cursor:pointer;   }   #banner ul li.on    {     background:#ccc;   }   #banner .list a   {     position:absolute;   } </style> <body>  <div id="banner">  <div id="banner_title"></div>   <ul>     <li class="on">1</li>   <li>2</li> <li>3</li> <li>4</li>   </ul>     <div class="list">     <a href="#" target="_blank"><img src="1(1).jpg" alt="Comexs1"/></a> <a href="#" target="_blank"><img src="2(1).jpg" alt="Comexs2"/></a> <a href="#" target="_blank"><img src="3(1).jpg" alt="Comexs3"/></a> <a href="#" target="_blank"><img src="4(1).jpg" alt="Comexs4"/></a>   </div>  </div> </body></html>

效果图:：