原理就是不断改变left 用n+2张图首尾重置left实现动画的连贯,慕课网上用的纯js
我课后用css3的transition 发现首尾会反向
我本来想的是在重置过程中先关闭transition 重置了left后再打开transition并继续移动
但是 这个transition属性非常坑,貌似只看onclick函数的首尾left状态 以及尾部
transition的设置,**_中间的left和transition设置完全无效_**。那么这种轮播图方法(用css3做动画)下。首尾反向问题还有办法解决吗?
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slideshow</title>
<style>
.container{
position: relative;
overflow: hidden;
height: 567px;
margin: 50px auto;
width: 1000px;
border: 5px solid #333;
}
#slideBox{height: 567px;
width: 6000px;
position: absolute;
z-index: 1;
transition: left 1s linear;
}
#buttons .on {background-color:orangered }
#buttons { position: absolute; height: 15px; width: 150px; z-index: 2; bottom: 20px; left: 435px;}
#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 15px; height: 15px; border-radius: 50%; background: #333; margin-right: 7px;}
img{width: 1000px; height:567px; float: left;}
.arrow{width: 60px;height: 60px;position: absolute;font-size:50px ;font-weight: bolder; line-height: 50px;top:250px;z-index:2; text-align: center;color: #fff;background-color: RGBA(0,0,0,0.3); display: none;
cursor: pointer; }
.arrow:hover{
background-color: RGBA(0,0,0,0.7);
}
.container:hover .arrow {display: block;}
#prev{
left: 10px ;
}
#next{
right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div id="slideBox" style="left: -1000px;">
<img src="images/4.jpg" alt="4">
<img src="images/1.jpg" alt="1">
<img src="images/2.jpg" alt="2">
<img src="images/3.jpg" alt="3">
<img src="images/4.jpg" alt="4">
<img src="images/1.jpg" alt="1">
</div>
<div id="buttons">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a class="arrow" id="prev"><</a>
<a class="arrow" id="next">></a>
<script type="text/javascript">
var next = document.getElementById("next");
var prev = document.getElementById("prev");
var buttons = document.getElementById("buttons");
var slideBox = document.getElementById("slideBox");
window.onload=function () {
//原计划到重置到时候先关闭重置完以后在打开 但是失败了。还有别的办法吗?
next.onclick=function () {
if(slideBox.style.left=="-5000px"){
slideBox.style.transitionDuration="0s";
slideBox.style.left="-1000px";
}
slideBox.style.transition="left 1s linear";
slideBox.style.left = parseInt(slideBox.style.left)-1000+"px";
};
}
</script>
</div>
</body>
</html>