banner轮播图在大多数的网页上都会有的，所以大多数情况下都会使用到这些就是代码，有些人大多数是使用插件写出来的，大多数使用的是swiper插件完成，这个插件有很多效果，可以访问一下官网：http://www.swiper.com.cn/里面有文档，接下来说一下这个原生写的banner轮播图

---

html：

<div id="dlunbo">

         <div id="igs">

                      <div classs="ig"><img src="images/1.jpg" alt=""></div>

                        <div classs="ig"><img src="images/2.jpg" alt=""></div>

                        <div classs="ig"><img src="images/3.jpg" alt=""></div>

                         <div classs="ig"><img src="images/4.jpg" alt=""></div>

          </div>

          <div id="tabs">

                   <div class="tag bg"></div>

                    <div class="tag"></div>

                    <div class="tag"></div>

                     <div class="tag"></div>

            </div>

            <div class="btn btn1>&lt;</div>

            <div class="btn btn2">&gt;</div>

</div>

---

js

var timer; //定时器的名字

var i = 0;

$(function(){

             // 第一个图片显示，其余的图片隐藏,找兄弟元素.siblings().

           $(".ig").eq(0).show().siblings().hide();

           //定时器

           /* timer = setInterval(function(){

                           i++;

                           if(i == 6 ){

                                   i=0;

                             }

                           // $(".ig").eq(i).show().siblings().hide();

                           // 渐变效果fadeIn渐入，fadeOut渐出

                           $(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);

                            $(".tag").eq(i).addClass("bg").siblings().removeClass("bg");

                   },3000);*/

                   startLunbo();

                     // 鼠标经过的时候

                    $(".tag").hover(function(){

                               clearInterval(timer);//清除定时器

                                i = $(this).index(); //获取到当前鼠标放在那个下标的索引

                                /*$(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);*/

                                  // $(".ig").eq(i).stop(true,true).fadeIn(300).siblings().stop(true,true).fadeOut(300);

                                  // $(".tag").eq(i).addClass("bg").siblings().removeClass("bg");

                                   showPicTab();

                     },function(){

                                /*timer = setInterval(function(){

                                                 i++;

                                                  if(i == 6 ){

                                                             i=0;

                                                    }

                                                         // $(".ig").eq(i).show().siblings().hide();

                                                         // 渐变效果fadeIn渐入，fadeOut渐出

                                                          $(".ig").eq(i).stop(true,true).fadeIn(300).siblings().stop(true,true).fadeOut(300);

                                                          $(".tag").eq(i).addClass("bg").siblings().removeClass("bg");

                                     },3000);*/

                                      startLunbo();

                             });

                          // 左点击

                           $(".btn1").click(function(){

                                      clearInterval(timer);

                                       i--;

                                        var imgs = $(".ig").length;

                                       if(i == -1){

                                                  i =imgs-1;

                                         }

                                                   showPicTab();

                                                    startLunbo();

                                    })

                                      // 右点击

                                      $(".btn2").click(function(){

                                               clearInterval(timer);

                                                i++;

                                                 var imgs = $(".ig").length;

                                                if(i ==imgs){

                                                          i=0;

                                                  }

                                                 showPicTab();

                                                  startLunbo();

                        })

});

// 封装

function showPicTab(){

           // stop() 方法停止当前正在运行的动画。

            $(".ig").eq(i).stop(true,true).fadeIn(300).siblings().stop(true,true).fadeOut(300);

           $(".tag").eq(i).addClass("bg").siblings().removeClass("bg");

}

function startLunbo(){

     timer = setInterval(function(){

            i++;

           var imgs = $(".ig").length;

            if(i == imgs ){

                       i=0;

               }

               showPicTab();

      },3000);

}