如何实现图片滚动一张后停一下的效果
首先，那一个大的计时器，用于开启一次图片的切换，大计时器的时间间隔为图片切换的时间和图片的停留时间，在大的计时器里面设置一个小的计时器，小计时器的时间间隔为图片移动的最小时间单位
话不多数，上代码
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
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;
}
</style>
<script>
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);
}
</script>
</head>
<body>
<div class="div_view" id="view">
<ul id="ul">
<li><img src="img/1.jpg" alt="" id="img_1"></li>
<li><img src="img/2.jpg" alt="" id="img_2"></li>
<li><img src="img/3.jpg" alt="" id="img_3"></li>
<li><img src="img/1.jpg" alt="" id="img_1"></li>
</ul>
</div>
</body>
</html>
