<!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"><</span>
<span id="span_right" class="span_btn">></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>
JS 旋转图片
猜你喜欢
转载自blog.csdn.net/weixin_42069386/article/details/84798167
今日推荐
周排行