<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>50-无限循环滚动</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 161px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
}
ul{
list-style: none;
width: 1800px;
height: 161px;
background: #000;
}
ul>li{
float: left;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 0.定义变量保存偏移位
var offset = 0;
// 1.让图片滚动起来
var timer;
function autoPlay(){
timer = setInterval(function () {
offset += -10;
if(offset <= -1200){
offset = 0;
}
$("ul").css("marginLeft", offset);
}, 50);
}
autoPlay();
// 2.监听li的移入和移出事件
$("li").hover(function () {
// 停止滚动
clearInterval(timer);
// 给非当前选中添加蒙版
$(this).siblings().fadeTo(100, 0.5);
// 去除当前选中的蒙版
$(this).fadeTo(100, 1);
}, function () {
// 继续滚动
autoPlay();
// 去除所有的蒙版
$("li").fadeTo(100, 1);
});
});
</script>
</head>
<body>
<div>
<ul>
<li><img src="images/a.jpg" alt=""></li>
<li><img src="images/b.jpg" alt=""></li>
<li><img src="images/c.jpg" alt=""></li>
<li><img src="images/d.jpg" alt=""></li>
<li><img src="images/a.jpg" alt=""></li>
<li><img src="images/b.jpg" alt=""></li>
</ul>
</div>
</body>
</html>无限循环滚动--图片自己找其他的代替哦
猜你喜欢
转载自blog.csdn.net/weixin_42805130/article/details/81332643
今日推荐
周排行