- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
1.现在的效果是播到最后一张后 又倒回到第一张
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>滚动</title>
<style>{
margin: 0;
padding: 0;}
ul,
{
list-style-type: none;}
.banner_wrap {
overflow: hidden;
position: relative;
margin: 10px auto;}
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
height: auto;}
width: 200px;
float: left;}
</style></head>
<body>
<p id="banner_wrap" class="banner_wrap">
<ul id="ul1">
<li><img src="img/c1.jpg" /></li>
<li><img src="img/c2.jpg" /></li>
<li><img src="img/c3.jpg" /></li>
</ul>
</p>
<script>
window.onload = function (){
var myBox = document.getElementById("ul1");
var bannerWrap = document.getElementById("banner_wrap");
var t = "";
var i= 0;
var moveDis=myBox.getElementsByTagName("li")[0].offsetWidth;
myBox.style.width=(myBox.getElementsByTagName("li").length)*moveDis+"px";
bannerWrap.style.width=myBox.getElementsByTagName("li")[0].offsetWidth+"px";
bannerWrap.addEventListener("mouseover", function () {
clearInterval(t);
});
bannerWrap.addEventListener("mouseout", function (){
t=setInterval(function(){
move(myBox);
},5000);
});
t=setInterval(function(){
move(myBox);
},5000);
function move(obj){
i++;
if(i>2){
i=0;
obj.style.transition="transform 0.01s ease";
};
obj.style.transition="transform 0.5s ease";
obj.style.transform="translateX("+(-moveDis*i)+"px)";
console.log(obj.style.transform);
};
};
</script></body>
</html>
高洛峰2017-04-10 17:42:17
如果你有4张图片：1，2，3，4。当加载到页面时，用JS去clone，第一张和第四张，结构变为：4，1，2，3，4，1，接下来就是怎么移动？
当移动到4时，如果在点击下一张，其实移动到的是clone的那个1，动画结束之后，然后重新定位到真正的1那个位置。
PHP中文网2017-04-10 17:42:17
思路可以模仿bootstrap3的轮播组件：保存3个图片容器的引用变量，分别是前项、当前项、后项。每次执行轮播时，一般是在滑动过程中要同时展示两个图片。所以在滑动之前就要切换这三个变量中存储的图片。
比如说有1,2,3,4四张图片，当前显示第2张时，当前项就是2，前项是1，后项是3。然后从2轮播到3时，就会同时显示2和3两张图。
以此类推，如果当前项是最后一项4，那么前项就是3，后一项是1。如果只有两张图时，如果当前项是2，那么前项就是1，后项也是1。
我自己搞的轮播组件也是用的这个思路，可供参考。
高洛峰2017-04-10 17:42:17
1 2 3-> 1 2 3 4［内容是1］
在最后一张得后面用js复制出一个第一个li 也就是4［内容是1］ 实际是第四个
然后轮播 当轮播到的第四个结束后 没有动画效果得跳到第一个 然后继续轮播。。。
