十七、JS旋转轮播效果

一、思路

1.构建基本结构及样式;

2.利用js的dom操作进行属性及层级的传递;默认顺时针旋转,即将下一张图片的属性及层级传递到上一张,最后一张图片继承第一张图片属性及层级;

3.左右箭头控制顺时针/逆时针切换;

4.底部索引圈显示索引为第几张，鼠标进入索引圈，即立刻跳转到相应图片;

二、步骤

1. 利用绝对相对定位及层级构建基础结构；

1. dom操作,利用定时器让其默认顺时针旋转;

注意:style样式只有是行内样式才可以直接操作，内部和外联获取的样式都是只读样式;

//获取元素
var boximg=document.getElementsByClassName("box");
var time=setInterval(function(){
    shift("right");
},2000);
//封装默认顺时针旋转
function shift(way) {
    if(way=="right"){
        var box=[boximg[0].style.top,boximg[0].style.left,boximg[0].style.zIndex];
        for(var i=0;i<boximg.length;i++){
            if(i<boximg.length-1){
                boximg[i].style.top=boximg[i+1].style.top;
                boximg[i].style.left=boximg[i+1].style.left;
                boximg[i].style.zIndex=boximg[i+1].style.zIndex;
            }else {
                boximg[i].style.top=box[0];
                boximg[i].style.left=box[1];
                boximg[i].style.zIndex=box[2];
            }
        }
    }
}

3.添加左右箭头事件，点击右箭头图片顺时针切换，左箭头逆时针切换;

这需要用到封装的顺时针旋转函数(方法)，给其传参，判断左右操作;

左箭头操作事件与右箭头操作相反，即将上一张图片的属性传递给此张图片；

//点击左箭头操作
var spanleft=document.getElementsByClassName("spanleft")[0];
spanleft.onclick=function(){
    clearInterval(time);
    shift("left");
    spanleft.style.cursor="pointer";
};
//点击右箭头操作
var spanright=document.getElementsByClassName("spanright")[0];
spanright.onclick=function(){
    clearInterval(time);
    shift("right");
    spanright.style.cursor="pointer";
};

4.添加鼠标进入某张图片停止旋转，离开继续默认顺时针旋转事件；

for(var k=0;k<boximg.length;k++){
    //鼠标进入事件
    boximg[k].onmouseenter=function(){
        clearInterval(time);
    };
    //鼠标离开事件
    boximg[k].onmouseleave=function(){
        time=setInterval(function(){
            shift("right");
        },1000);
    }
}

5.最后添加索引圈事件，切换图片索引圈跟随变换;

定义一个变量控制索引圈的切换默认第一个圈为选中圈

//索引圈事件
var circle=document.getElementsByClassName("circle");
circle[0].style.backgroundColor="red";
var count=0;

添加到顺时针旋转方法中，左右箭头对应索引圈的切换

//索引圈顺时针变换
if(way=="right"){
    circle[count].style.backgroundColor="";
    count++;
    if(count>=boximg.length){
        count=0;
    }
    circle[count].style.backgroundColor="red";
}
if(way=="left"){
    circle[count].style.backgroundColor="";
    count--;
    if(count<0){
        count=boximg.length-1;
    }
    circle[count].style.backgroundColor="red";
}

最终显示效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js轮播旋转</title>
    <style>
        *{margin: 0;padding: 0;}
        html,body{width: 100%;height: 100%;overflow: hidden;}
        .block{
            width: 600px;
            height: 400px;
            margin: 80px auto;
            position: relative;
            transform: rotateX(10deg);
            transform-style: preserve-3d;
        }
        .spanleft{
            font-size: 40px;
            font-weight: bold;
            color: white;
            position: absolute;
            top: 165px;
            left: -90px;
            z-index: 6;
        }
        .spanright{
            font-size: 40px;
            font-weight: bold;
            color: white;
            position: absolute;
            top: 165px;
            left: 660px;
            z-index: 6;
        }
        .box{
            width: 300px;
            height: 200px;
            border: 1px solid blue;
            box-shadow:5px -8px 20px rgba(0, 0, 0, 0.62);
            transition: all 0.1s;
            position: absolute;
        }
        .box img{
            width: 300px;
            height: 200px;
        }
        .cir{
            width: 150px;
            height: 20px;
            z-index: 7;
            position: absolute;
            top: 470px;
            left: 240px;
        }
        .circle{
            width: 10px;
            height: 10px;
            border: 2px solid grey;
            border-radius: 50%;
            float: left;
            margin: 0 5px;
        }
    </style>
    <script>
        window.onload=function(){
            //获取元素
            var boximg=document.getElementsByClassName("box");
            var time=setInterval(function(){
                shift("right");
            },1000);
            //点击左箭头操作
            var spanleft=document.getElementsByClassName("spanleft")[0];
            spanleft.onclick=function(){
                clearInterval(time);
                shift("left");
                spanleft.style.cursor="pointer";
            };
            //点击右箭头操作
            var spanright=document.getElementsByClassName("spanright")[0];
            spanright.onclick=function(){
                clearInterval(time);
                shift("right");
                spanright.style.cursor="pointer";
            };


            for(var k=0;k<boximg.length;k++){
                //鼠标进入事件
                boximg[k].onmouseenter=function(){
                    clearInterval(time);
                };
                //鼠标离开事件
                boximg[k].onmouseleave=function(){
                    time=setInterval(function(){
                        shift("right");
                    },1000);
                }
            }
            //索引圈事件
            var circle=document.getElementsByClassName("circle");
            circle[0].style.backgroundColor="red";
            var count=0;

            //封装默认顺时针旋转
            function shift(way) {
                //索引圈顺时针变换
                if(way=="right"){
                    circle[count].style.backgroundColor="";
                    count++;
                    if(count>=boximg.length){
                        count=0;
                    }
                    circle[count].style.backgroundColor="red";
                }
                if(way=="left"){
                    circle[count].style.backgroundColor="";
                    count--;
                    if(count<0){
                        count=boximg.length-1;
                    }
                    circle[count].style.backgroundColor="red";
                }
                //图片切换
                if(way=="right"){
                    var box=[boximg[0].style.top,boximg[0].style.left,boximg[0].style.zIndex];
                    for(var i=0;i<boximg.length;i++){
                        if(i<boximg.length-1){
                            boximg[i].style.top=boximg[i+1].style.top;
                            boximg[i].style.left=boximg[i+1].style.left;
                            boximg[i].style.zIndex=boximg[i+1].style.zIndex;
                        }else {
                            boximg[i].style.top=box[0];
                            boximg[i].style.left=box[1];
                            boximg[i].style.zIndex=box[2];
                        }
                    }

                }
                if(way=="left"){
                    var box1=[boximg[boximg.length-1].style.top,boximg[boximg.length-1].style.left,boximg[boximg.length-1].style.zIndex];
                    for(var j=boximg.length-1;j>=0;j--){
                        if(j>0){
                            boximg[j].style.top=boximg[j-1].style.top;
                            boximg[j].style.left=boximg[j-1].style.left;
                            boximg[j].style.zIndex=boximg[j-1].style.zIndex;
                        }else{
                            boximg[j].style.top=box1[0];
                            boximg[j].style.left=box1[1];
                            boximg[j].style.zIndex=box1[2];
                        }
                    }
                }
            }

        }
    </script>

</head>
<body>
<div class="block">
    <div class="box" style="top:250px;left: 150px;z-index: 5;"><img src="./image/box1.jpg"></div>
    <div class="box" style="top:150px;left: -100px;z-index: 2;"><img src="./image/box2.jpg"></div>
    <div class="box" style="top:50px;left: -100px;z-index: 1;"><img src="./image/box3.jpg"></div>
    <div class="box" style="top:-50px;left: 150px;z-index: 0;"><img src="./image/box4.jpg"></div>
    <div class="box" style="top:50px;left: 400px;z-index: 3;"><img src="./image/box5.jpg"></div>
    <div class="box" style=" top:150px;left: 400px;z-index: 4;"><img src="./image/box6.jpg"></div>
    <span class="spanleft"><</span>
    <span class="spanright">></span>
    <div class="cir">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>
</body>
</html>

十七、JS旋转轮播效果

猜你喜欢