效果图
素材取自淘宝首页，非广告
原理
原理图
布局
<body>
<div class="box">
<ul id="oul">
<li><a href=""><img src="images/scan/1.jpg" alt=""></a></li>
<li><a href=""><img src="images/scan/2.jpg" alt=""></a></li>
<li><a href=""><img src="images/scan/3.webp" alt=""></a></li>
<li><a href=""><img src="images/scan/4.webp" alt=""></a></li>
//第五张图片和第一张图片一样，形成无缝连接
<li><a href=""><img src="images/scan/1.jpg" alt=""></a></li>
</ul>
</div>
</body>
样式
<style>
*{ margin: 0; padding: 0; }
.box{
width: 520px;
height: 280px;
margin: 100px auto;
overflow: hidden;
position: relative; //子绝父相
}
.box ul{
width: 500%;
height: 100%;
position: absolute; //子绝父相，通过设置ul的left值改变让ul移动
}
.box ul li{
list-style: none;
float: left; }
</style>
JS实现
<script>
window.onload = function(){
var oul = document.getElementById('oul'); //获取ul
var num = 0; //设置ul的left值的变量为num
var timer;
timer = setInterval(scoll,5);
//鼠标滑过时清空定时器让ul停止走动
oul.onmouseover = function(){
clearInterval(timer);
}
//鼠标移走时定时器重新开始，num继续--，ul继续开始走动
oul.onmouseout = function(){
timer = setInterval(scoll,5);
};
//num--使ul向左移动，当走过4个图片宽度时让ul从最初的位置开始走动
function scoll(){
num --;
num<=-520*4?num=0:num=num;
oul.style.left = num + 'px';
}
}
</script>
以上就是用JS实现的自动循环轮播图，我又加上了鼠标移过停留的效果。
网友评论