JS 旋转图片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转图片</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .block{
            width: 1200px;
            height: 400px;
            margin: 0 auto;
            position: relative;;
        }
        .slip_img{
            width: 500px;
            height: 250px;
            position: absolute;
            transition: all 0.5s linear;
        }
        .slip_img img{
            width: 100%;
            height: 100%;
        }
        .span_btn{
            font-size: 50px;
            font-weight: 600;
            color:blue;
            position: absolute;
            top: 200px;
            z-index: 10;
        }
        #span_left{
            left: 20px;
        }
        #span_right{
            right: 20px;
        }
        .dot_div{
            position: absolute;
            top: 360px;
            left: 535px;
            z-index: 10;
        }
        .dot{
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 2px solid white;
            margin: 0 3px;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="slip_img" style="top: 150px;left: 350px;z-index: 6"><img src="../images/pic_1.jpg"></div>
    <div class="slip_img" style="top: 100px;left: 0;z-index: 5"><img src="../images/pic_2.jpg"></div>
    <div class="slip_img" style="top: 50px;left: 0;z-index: 4"><img src="../images/pic_3.jpg"></div>
    <div class="slip_img" style="top: 0;left: 350px;z-index: 3"><img src="../images/pic_4.jpg"></div>
    <div class="slip_img" style="top: 50px;left: 700px;z-index: 4"><img src="../images/pic_5.jpg"></div>
    <div class="slip_img" style="top: 100px;left: 700px;z-index: 5"><img src="../images/pic_6.jpg"></div>

    <!--左右切换图片按钮-->
    <span id="span_left" class="span_btn">&lt;</span>
    <span id="span_right" class="span_btn">&gt;</span>

    <!--圆点-->
    <div class="dot_div">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
</div>
<script>
    var slip_img=document.getElementsByClassName("slip_img");
    var span_left=document.getElementById("span_left");
    var span_right=document.getElementById("span_right");
    var dot=document.getElementsByClassName("dot");
    var count;

    dot[0].style.backgroundColor="white";

//    图片切换函数
    function slip(way){
//        记录函数执行时图片和圆点状态
        var slip_top=[slip_img[0].style.top,slip_img[1].style.top,slip_img[2].style.top,slip_img[3].style.top,slip_img[4].style.top,slip_img[5].style.top];
        var slip_left=[slip_img[0].style.left,slip_img[1].style.left,slip_img[2].style.left,slip_img[3].style.left,slip_img[4].style.left,slip_img[5].style.left];
        var slip_zindex=[slip_img[0].style.zIndex,slip_img[1].style.zIndex,slip_img[2].style.zIndex,slip_img[3].style.zIndex,slip_img[4].style.zIndex,slip_img[5].style.zIndex];
        var dot_bac=[dot[0].style.backgroundColor,dot[1].style.backgroundColor,dot[2].style.backgroundColor,dot[3].style.backgroundColor,dot[4].style.backgroundColor,dot[5].style.backgroundColor]
        for(var i=0;i<slip_img.length;i++){
            //图片向左转
            if(way=="left"){
                if(i>=5){
                    slip_img[5].style.top=slip_top[0];
                    slip_img[5].style.left=slip_left[0];
                    slip_img[5].style.zIndex=slip_zindex[0];
                    dot[5].style.backgroundColor=dot_bac[0];
                }
                slip_img[i].style.top=slip_top[i+1];
                slip_img[i].style.left=slip_left[i+1];
                slip_img[i].style.zIndex=slip_zindex[i+1];
                dot[i].style.backgroundColor=dot_bac[i+1];
            }
            //图片向右转
            if(way=="right"){
                if(i==0){
                    slip_img[0].style.top=slip_top[5];
                    slip_img[0].style.left=slip_left[5];
                    slip_img[0].style.zIndex=slip_zindex[5];
                    dot[0].style.backgroundColor=dot_bac[5];
                }
                slip_img[i].style.top=slip_top[i-1];
                slip_img[i].style.left=slip_left[i-1];
                slip_img[i].style.zIndex=slip_zindex[i-1];
                dot[i].style.backgroundColor=dot_bac[i-1];
            }
        }
    }

    setInterval(function(){
        slip("right");
    },3000);

    //左右按钮切换
    span_left.onclick=function(){
        slip("left");
    }
    span_left.onmouseenter=function(){
        clearInterval(time);
    }
    span_left.onmouseleave=function (){
        time=setInterval(function(){
            slip("right");
        },2000);
    }

    span_right.onclick=function(){
        slip("right");
    }
    span_right.onmouseenter=function(){
        clearInterval(time);
    }
    span_right.onmouseleave=function (){
        time=setInterval(function(){
            slip("right");
        },2000);
    }


    for(var i=0;i<dot.length;i++){
        dot[i].index=i;

        //点击圆点切换图片
        //思路：获取当前图片索引值和圆点点击时的索引值，两者之差决定向左或向右旋转图片的次数
        dot[i].onclick=function(){
            for(var k=0;k<dot.length;k++){
                if(dot[k].style.backgroundColor=="white"){
                    if(this.index>k){
                        count=this.index-k;
                        for(var a=0;a<count;a++){
                            slip("right");
                        }
                        break;    //图片旋转一定次数后退出循环
                    }
                    if(this.index<k){
                        count=k-this.index;
                        for(var b=0;b<count;b++){
                            slip("left");
                        }
                        break;
                    }
                }
            }
        }
    }
</script>
</body>
</html>
猜你喜欢
