核心提示：一组图片实现无缝轮播的代码教程!DOCTYPE htmlhtmlhead lang=enmeta charset=UTF-8title/titlestyle*{margin:0;padding:0;}...
一组图片实现无缝轮播的代码教程
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
img {vertical-align: top; } /*取消图片底部3像素距离*/
.box {
width: 600px;
height: 200px;
margin: 100px auto;
background-color: pink;
position: relative;
overflow: hidden;
}
.box ul li {
float: left;
}
.box ul {
width: 400%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<p class="box" id="scroll">
<ul>
<li><img src="images/01.jpg" alt=""/></li>
<li><img src="images/02.jpg" alt=""/></li>
<li><img src="images/03.jpg" alt=""/></li>
<li><img src="images/04.jpg" alt=""/></li>
<li><img src="images/01.jpg" alt=""/></li>
<li><img src="images/02.jpg" alt=""/></li>
</ul>
</p>
</body>
</html>
<script>
var scroll = document.getElementById("scroll");
var ul = scroll.children[0];
var num = 0; //控制左侧值 left
var timer = null; // 定时器
var leader = 0,target = 0;
timer = setInterval(autoPlay,1);
function autoPlay() {
target --;
// num--;
//console.log(num);
target<=-1200 ? target = 0 : target;
leader = leader + (target - leader) / 10;
ul.style.left = leader + "px";
}
scroll.onmouseover = function() { // 鼠标经过大盒子 停止定时器
clearInterval(timer);
}
scroll.onmouseout = function() {
timer = setInterval(autoPlay,20); // 开启定时器
}
</script>
