|
如何实现图片滚动一张后停一下的效果 首先，那一个大的计时器，用于开启一次图片的切换，大计时器的时间间隔为图片切换的时间和图片的停留时间，在大的计时器里面设置一个小的计时器，小计时器的时间间隔为图片移动的最小时间单位 话不多数，上代码
Document
* {
margin: 0;
padding: 0;
}
img {
width: 800px;
height: 450px;
}
li {
float: left;
}
.div_view {
margin: 0 auto;
width: 800px;
height: 450px;
/* background-color: red; */
overflow: hidden;
}
ul {
position: relative;
width: 3200px;
left: 0px;
list-style: none;
}
window.onload=function(){
function getStyle(obj,name){
//第一个参数为obj为要获取属性的对象
//第二个参数为name为要获取的属性名字
return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]
//这种方式的代码比if判断要简单一些
}
let speed=5;
setInterval(function(){
console.log("start");
//获取ing的宽度和图片的数量
let img_w=parseInt(getStyle(document.getElementById("view"),"width"));
let imgNum=3;
let timer=setInterval(function(){
let ul=document.getElementById("ul");
let left=parseInt(getStyle(ul,"left"));
//获取ul和它的left值
ul.style.left=left-speed+"px";
//修改left
left=parseInt(getStyle(ul,"left"));
//更新left值
if(left==-(img_w*imgNum))
{
ul.style.left=0+"px";
}
if(left%img_w==0)
{
clearInterval(timer);
}
},10)
},4000);
}
|