jquery实现⽆限循环滚动复制下⾯代码查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div#outer{
width: 1000px;
height: 200px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
#imglist{
width: 3000px;
height: 200px;
list-style: none;
background:  black;
}
ul>li{
float: left;
}
</style>
</head>
<div id="outer">
<ul id="imglist">
<li><img src="img/1.jpg"alt=""></li>
<li><img src="img/2.jpg"alt=""></li>
<li><img src="img/3.jpg"alt=""></li>
<li><img src="img/4.jpg"alt=""></li>
<li><img src="img/1.jpg"alt=""></li>
<li><img src="img/2.jpg"alt=""></li>
</ul>
</div>
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script> <script type="text/javascript">
$(function(){
//定义变量保存偏移量
var offset=0;
// 让图⽚滚动起来
var timer
function autoplay(){
timer=setInterval(function(){
offset-=10;
if(offset<-1000){
offset=0;
}
$('ul').css('marginLeft',offset);
},50)
}
html滚动效果代码
autoplay();
/
/监听li的移⼊移出事件
$('li').hover(function(){
clearInterval(timer);
$(this).siblings().fadeTo(100,0.5);
$(this).fadeTo(100,1);
},function(){
autoplay();
$('li').fadeTo(100,1);
})
})
</script>
<body>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。