大图滚动

大图滚动
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .wrap{
                width: 400px;
                height: 200px;
                margin: 200px auto;
                overflow: hidden;
                position:relative;
            }
            .box1{
                width: 80000px;
                margin-left: -400px;
                transition: all 1s;
            }
            img{
                width: 400px;
                height: 200px;
                display: block;
                float: left;
            }
            .left,.right{
                position: absolute;
                background-color: darkgrey;
                opacity: 0.5;
                width: 20px;
                height: 50px;
                border-radius: 5px;
                line-height: 50px;
                text-align: center;
                font-size: 20px;
                top:75px;
                cursor: default;
            }
            .right{
                right: 0;
            }
            ul{
                position: absolute;
                top: 150px;
                left: 100px;
            }
            li{
                list-style: none;
                width: 20px;
                height: 20px;
                background-color: gainsboro;
                border-radius: 50%;
                float: left;
                margin-right: 10px;
                
            }
            
        </style>
    </head>
    <body>
        <div class="wrap">
                <div class="box1">
                    ![](img/AKL4.jpg)
                    ![](img/AKL1.jpg)
                    ![](img/AKL2.jpg)
                    ![](img/AKL3.jpg)
                    ![](img/AKL4.jpg)
                    ![](img/AKL1.jpg)
                </div>
                <div class="left"><</div>
                <div class="right">></div>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
        </div>
    </body>
    <script type="text/javascript">
        var wrap=document.getElementsByClassName("wrap");
        var boxs=document.getElementsByClassName("box1");
        var left=document.querySelector(".left");
        var right=document.querySelector(".right");
        var lis=document.querySelectorAll("li");
        var timer=null;
        var a=-400;
        var b=0;
        lis[0].style.backgroundColor="yellow";
        function timefn () {
            clearInterval(timer);
            timer = setInterval(function () {
            a=a-400;
            boxs[0].style.transition=1+"s";
            if(a == -2000){
                setTimeout(function(){
                    a = -400;
                    boxs[0].style.transition="0s all";
                    boxs[0].style.marginLeft =a+"px";
                }, 1000); 
            }
            boxs[0].style.marginLeft =a+"px";
            
            b=a/-400-1;
            if(b==4){
                b=0;
            }
            for(var i=0;i<4;i++){
                lis[i].style.backgroundColor="gainsboro"
            }
            lis[b].style.backgroundColor="yellow";
            
        },2000)
        }
        timefn();
        
        left.onclick = function () {
            a=a+400;
            boxs[0].style.transition=1+"s";
            if(a==0){ 
                setTimeout(function(){
                a = -1600;
                boxs[0].style.transition="0s all";
                boxs[0].style.marginLeft =a+"px";
                },900); 
            }
            boxs[0].style.marginLeft =a+"px";
            timefn();
            for(var i=0;i<4;i++){
                lis[i].style.backgroundColor="gainsboro"
            }
//          b-=1;
//          if(b<0){
//              b=3;
//          }
            b=a/-400-1;
            if(b==-1){
                b=3;
            }
            console.log(a);
            console.log(b);
            lis[b].style.backgroundColor="yellow";
        }

        right.onclick = function () {
            a=a-400;
            boxs[0].style.transition=1+"s";
            if(a==-2000){ 
                setTimeout(function(){
                a = -400;
                boxs[0].style.transition="0s all";
                boxs[0].style.marginLeft =a+"px";
                },900);     
            }   
            boxs[0].style.marginLeft =a+"px";
            timefn();
            for(var i=0;i<4;i++){
                lis[i].style.backgroundColor="gainsboro"
            }
//          b+=1;
//          if(b>3){
//              b=0;
//          }
            b=a/-400-1;
            if(b==4){
                b=0;
            }
            lis[b].style.backgroundColor="yellow";
        }
        
        for(var j=0;j<4;j++){
            lis[j].index=j;
            lis[j].onclick = function () {
                for(var k=0;k<4;k++){
                lis[k].style.backgroundColor="gainsboro"
                }
                this.style.backgroundColor="yellow";    
                clearInterval(timer);
                a=(this.index+1)*-400
                boxs[0].style.transition=1+"s";
                boxs[0].style.marginLeft =a+"px";
                timefn();
            }
        }
        
//      wrap[0].onmouseover = function () {
//          clearInterval(timer);
//      }
//      wrap[0].onmouseout = function () {
//          timefn();
//      }
    </script>
</html>
最后编辑于：2017.12.06 21:04:57
推荐阅读更多精彩内容
