js banner轮播图优化

今早写了一个发布之后，又修改了一下，优化一下代码

html:

 

         

         

         

<

         

>

css:

*{

padding: 0;

margin: 0;

font-family: "微软雅黑";

}

#dlunbo{

width: 500px;

height: 333px;

position: relative;

}

#igs .ig,#dlunbo img{

width: 500px;

height: 333px;

}

.ig{

position: absolute;

}

#tabs{

position: absolute;

bottom: 10px;

left: 50%;

margin-left: -80px;

}

.tag{

width: 15px;

height: 15px;

border: 1px solid #fff;

float: left;

border-radius: 50%;

margin-right: 5px;

}

.tag:hover{

background: red;

}

.bg{

background: red;

}

.btn{

width: 30px;

height: 40px;

background: rgba(0,0,0,0.5);

position: absolute;

top: 50%;

margin-top: -20px;

color: #fff;

font-size: 25px;

line-height: 40px;

text-align: center;

}

.btn1{

left: 10px;

}

.btn2{

right: 10px;

}

js:

var timer; //定时器的名字

var i = 0;

$(function(){

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

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

        // 定时器

         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;

               // alert(imgs);

               if(i == imgs){

                         i=0;

                 }

                  showPicTab();

         },3000);

}

// 写json数据

var img = [

           {img: "1.jpg"},

           {img: "2.jpg"},

            {img: "3.jpg"},

            {img: "4.jpg"},

            {img: "5.jpg"},

            {img: "6.jpg"},

];

window.onload=function(){

         igs();

          tabs();

          $(".tag:first-child").addClass("bg");

//把这段代码拿到这里，因为按钮是js加载进入

// 鼠标经过的时候

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

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

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

// 停止图片轮播

showPicTab();

},function(){

// 开始轮播

startLunbo();

});

}

// 图片

function igs(){

         var igs="

";

         for(var i=0;i

                      igs+="

;

         }

         igs+="

";

         document.getElementById("igs").innerHTML = igs;

}

// 按钮

function tabs(){

          var tabs="

";

          for(var i=0;i

                     tabs+="

";

          }

          tabs+="

";

          document.getElementById("tabs").innerHTML = tabs;

}