JQuery实现一个轮播图

1、HTML

 <div class="banner">
     <div class="b_main">
         <div class="b_m_pic">
             <ul>
                 <li>
                     <a>
                         <img src="img/1.png" />
                     </a>
                 </li>
                 <li>
                     <a>
                         <img src="img/2.png" />
                     </a>
                 </li>
                 <li>
                     <a>
                         <img src="img/3.jpg" />
                     </a>
                 </li>
                 <li>
                     <a>
                         <img src="img/4.jpg" />
                     </a>
                 </li>
                 <li>
                     <a>
                         <img src="img/5.png" />
                     </a>
                 </li>
                 <li>
                     <a>
                         <img src="img/6.png" />
                     </a>
                 </li>
             </ul>
         </div>
     </div>
     <!--小圆点-->
     <div class="b_list">
         <ul>
             <li class="l_click"></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
         </ul>
     </div>
     <div class="b_btn">
         <div class="b_left">&lt</div>
         <div class="b_right">&gt</div>
     </div>
 </div>

2、CSS

 <style type="text/css">
     * {
         margin: ;
         padding: ;
     }

     ul li {
         list-style: none;
     }

     img {
         margin: ;
         width: %; /*这里的宽高是为了占满盒子*/
         height: %;
     }

     .banner {
         position: relative;
         width: 1366px;
         height: 780px;
         margin: 100px auto;
         border: 10px solid #;
         border-radius: 15px;
     }

         .banner .b_main {
             position: relative;
             width: 1366px;
             height: 780px;
         }

             .banner .b_main .b_m_pic {
                 position: relative;
                 width: 1366px;
                 height: 780px;
             }

     .b_main .b_m_pic li {
         position: absolute; /*这里给绝对定位，是为了把li叠在一起*/
         width: 1366px;
         height: 780px;
         top: ;
         left: ;
     }
     /*小圆点的样式*/
     .b_list ul {
         position: absolute; /*这里的ul根据banner定位*/
         right: 40px;
         bottom: 30px;
     }

         .b_list ul li {
             width: 20px;
             height: 20px;
             float: left;
             background: #;
             margin-left: 20px;
             border-radius: 50px;
             border: 2px solid white;
         }

         .b_list ul .l_hover, .b_list ul .l_click {
             border: 2px solid #;
             background: white;
         }
     /*两边耳朵的样式*/
     .b_btn div {
         position: absolute;
         width: 100px;
         height: 100px;
         background: rgba(,,,0.7);
         font-size: 60px;
         color: white;
         text-align: center;
         line-height: 100px;
         top: %;
         margin-top: -80px;
         cursor: pointer;
     }
     /*移到左边*/
     .b_btn .b_left {
         left: ;
         border-radius: %;
     }
     /*移到右边*/
     .b_btn .b_right {
         right: ;
         border-radius: %;
     }
 </style>

3、JS

 var $li = $(".b_list ul li");//获取.b_list里面的所有li，放到$li这个变量里面
 var len = $li.length - ;
 var _index = ;//li的索引
 var $img = $(".b_main .b_m_pic li");//同上
 var $btn = $(".b_btn div");
 var timer = null;

 $li.hover(function () {
     $(this).addClass("l_hover");//指向li添加样式
 }, function () {
     $(this).removeClass("l_hover");//指向li删除样式
 });

 //封装函数
 function play() {
     //获取li的下标，改变样式
     $li.eq(_index).addClass("l_click").siblings().removeClass("l_click");
     //获取图片的下标，实现淡入淡出
     $img.eq(_index).fadeIn().siblings().fadeOut();
 }

 //点击事件
 $li.click(function () {
     _index = $(this).index();
     //获取li的下标，改变样式
     //$li.eq(_index).addClass("l_click").siblings().removeClass("l_click");
     //获取图片的下标，实现淡入淡出
     //$img.eq(_index).fadeIn().siblings().fadeOut();
     play();
 });

 //两边耳朵的点击事件
 $btn.click(function () {
     var index = $(this).index();
     if (index) {
         _index++;
         if (_index > len) {
             _index = ;
         }
         play();
     } else {
         _index--;
         if (_index < ) {
             _index = len;
         }
         play();
     }
 });

 //定时轮播
 function auto() {
     //把定时器放进timer这个对象里面
     timer = setInterval(function () {
         _index++;
         if (_index > len) {
             _index = ;
         }
         play();
     }, );
 }

 auto();

 //当我移上d_main的时候停止轮播
 $(".b_main").hover(function () {
     clearInterval(timer);
 }, function () {
     //移开重新调用播放
     auto();
 });

 //当我移上两边耳朵的时候停止轮播
 $(".b_btn div").hover(function () {
     clearInterval(timer);
 }, function () {
     //移开重新调用播放
     auto();
 });

4、效果图

5、总结

　　① 图片、小圆点、两边的耳朵要使用position：absolute绝对定位，进行叠加。

　　　　注：绝对定位要根据父级元素进行定位，父级元素要加上position: relative;

　　② 根据索引值改变图片，达成切图

　　　　注：实现淡入淡出分别是fadeIn和fadeOut两个jq方法

　　　　　　siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。

　　③ 定时器（实现轮播）：

　　　　　　setInterval()是开始播放，clearInterval()是关闭

　　　　　　定时器有两个参数，第一个是函数方法（可以另写一个方法，写上方法名调用，也可以直接写一个function），第二个是时间