jquery实现轮播图

来源：互联网发布：mac选择office安装路径编辑：程序博客网时间：2024/05/20 05:23

jquery实现轮播图

先放出源码，然后再做分析
Html部分：

<html>    <head>        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />        <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>    </head>    <body>        <div class="main">            <a href = "">                <img alt="图片1" title="图片1" src="xxx1.jpg">            </a>            <a href = "">                <img alt="图片2" title="图片2" src="xxx2.jpg">            </a>            <a href = "">                <img alt="图片3" title="图片3" src="xxx3.jpg">            </a>            <a href = "">                <img alt="图片4" title="图片4" src="xxx4.jpg">            </a>            <ul>                <li class = "selected">1</li>                <li>2</li>                <li>3</li>                <li>4</li>            </ul>        </div>    </body></html>

CSS部分：

*{  margin:0;  padding:0;  list-style:none;  border:none;}.main {  position:relative;  margin:0 auto;  width:1089px;  height:476px;}.main a{position:absolute;}.main a img{  width:100%;}.main ul{  position:absolute;  z-index:5;  top:436px;  left:949px;}.main ul li {  margin:5px;  font-size:22px;  width:25px;  height:25px;  border-radius:50%;  text-align:center;  background:#ffffff;  float:left;  cursor:pointer;}.main ul li.selected{background:#FF4040;}

jquery部分：

var n = 0;var time =null;  //不设置自动轮播var count ;$(function(){  count = $(".main a").length; //获取图片数  $(".main a:not(:first-child)").hide();  //不是首张图片都要隐藏  $(".main ul li").on("click",function(){    var index = $(this).text()-1;  //获取被点击的列表项中li的索引    n = index;  //将选择的列表项li的索引赋给n    console.log(n);      $(".main a").filter(":visible").fadeOut(500).parent().children().eq(index).fadeIn(500);  //将显示的图片fadeOut，然后让选中的li项fadeIn    $(this).addClass("selected"); //给选中的li选中的样式    $(this).siblings().removeClass("selected"); //将选中的li项的兄弟项的选中样式去除  });  time = setInterval("t()",5000); //给t()设置定时器，每5s执行  $(".main").hover(    function(){ clearInterval(time)},  //鼠标在图片上的时候清除定时器，不自动轮播    function(){time = setInterval("t()",5000)}  );});function t(){if(n>=(count-1)){  //如果选中的li索引大于等于图片数（实际上就是代表选中的li是最后一个了）n=0;  //让索引=0}else{    ++n;  //索引+1}  $(".main ul li").eq(n).trigger("click"); //让选中的li触发click事件}

详情参考：图片轮播

阅读全文

0 0