一、思路
1.构建基本结构及样式;
2.利用js的dom操作进行属性及层级的传递;默认顺时针旋转,即将下一张图片的属性及层级传递到上一张,最后一张图片继承第一张图片属性及层级;
3.左右箭头控制顺时针/逆时针切换;
4.底部索引圈显示索引为第几张,鼠标进入索引圈,即立刻跳转到相应图片;
二、步骤
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>