轮播图代码

效果：


 

---

图片自动播放原理：
1.  所有轮播的图片水平排列在一条线放在div2中。div2嵌套在div1中。
1.  div1设置css：overflow:hidden即溢出则隐藏。
3.  div2每隔5s向左移动距离=一张图片的宽度*n。
4.   n++。
5.   直到展示完毕最后一张图，n重置为0。
按钮跟随图片的移动背景色相应改变原理：
1.  自动播放的时候调用这个函数
2.   根据传递的参数n的值，得到button的index
3.  将该index的button元素的classname设置为on，其他设置为off
 

---

html代码：

<div class="lunbo">
 <div class="lunbo-inner" id="lunbo-inner">    
     <img id="lunbo-img" class="lunbo-img" src="8.jpg">  
     <img class="lunbo-img" src="10.jpg"> 
     <img class="lunbo-img" src="9.jpg"> 
     <img class="lunbo-img" src="3.jpg">  
     <img class="lunbo-img" src="5.jpg">	 
     <img class="lunbo-img" src="8.jpg"> 	 
 </div>
 <div id="btn">
   <button class="on" index="1"></button>
   <button index="2"></button>
   <button index="3"></button>
   <button index="4"></button>
   <button  index="5"></button>
 </div>
</div>

js代码

window.onload=function(){

/*-------------------------------轮播图start--------------------------------*/

var dot=document.getElementById("btn").getElementsByTagName("button");

var x=document.getElementById("lunbo-inner");

    var y=document.getElementsByClassName("lunbo-img");

    var wid=$("#lunbo-img").width();

    var num=y.length-1;

    //var lun=1;

var lun=0;


    /*下标button背景色*/
function see(index){

for(var j=0;j<5;j++){

if(dot[j].className == "on"){

dot[j].className='off';

break;

}}

dot[index].className="on";

}




/*图片自动切换*/

function play(){

     timer=setInterval(function(){

        if(lun<num){

            x.style.transform="translate3d("+(-wid*lun)+"px, 0px, 0px)";

            x.style.transition="transform 1s ease 0s";

            see(lun);

        lun++;

        }else if(lun==num){

            x.style.transform="translate3d("+(-wid*lun)+"px, 0px, 0px)";

            x.style.transition="transform 1s ease 0s";

see(0);

lun++;

        }

        else if(lun>num){

            x.style.transform="translate3d(0px, 0px, 0px)";

            x.style.transition="transform 0s ease 0s";

            lun=1;

            see(0);

        }

    },1600);

}

play();



/*点击button切换图片*/

for(var s=0;s<num;s++){

dot[s].onclick=function(){

    clearInterval(timer);

    var index=this.getAttribute("index")-1;

     x.style.transform="translate3d("+(-wid*index)+"px, 0px, 0px)";

    x.style.transition="transform 1s ease 0s";

see(index);

    lun =index;

    play();

}}




/*------------------------------------轮播图end------------------------------------------*/

var hover=document.getElementsByClassName("wrap");

var two=document.getElementsByClassName("two");

for(var i=0;i<hover.length;i++){

hover[i].onmouseover=function(){

var j=this.getAttribute("index");

two[j].style.transform="translateY(-190px)";

two[j].style.transition="transform 0.8s ease";

}

hover[i].onmouseout=function(){

var j=this.getAttribute("index");

two[j].style.transform="translateY(0px)";

two[j].style.transition="transform 0.8s ease";

}

}


    /*----------------------导航栏start----------------*/

    $("#menu").click(function(){

        $("#nav").toggle();

    }) //移动端导航栏



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

    var nums=this.getAttribute("index");

        $("#nav").find("div[index="+nums+"]").toggle();



})

    var choose=document.getElementsByClassName("choose");

    var showindex=document.getElementsByClassName("up");

    var showindex=document.getElementById("nav").getElementsByTagName("div");



    for(var i=0;i<7;i++){

    choose[i].onmouseover=function(){

        var nums=this.getAttribute("index");

        showindex[nums].style.display="block";

    }

    choose[6].onmouseover=function(){

        showindex[4].style.display="block";

    }



    choose[i].onmouseout=function(){

        var nums=this.getAttribute("index");

            showindex[nums].style.display="none";

    }

    choose[6].onmouseout=function(){

        showindex[4].style.display="none";

    }

    showindex[i].onmouseover=function(){

        this.style.display="block";

    }

    showindex[i].onmouseout=function(){

        this.style.display="none";

    }

    }

}