html代码
<body>
<ul class="mscroll-ul">
<li class="item fore1">
<a>
<img width="250" height="164" src="img/1.png" class="loading-style2">
</a>
</li>
<li class="item fore2">
<a>
<img width="250" height="164" src="img/2.png" class="loading-style2">
</a>
</li>
<li class="item fore3">
<a>
<img width="250" height="164" src="img/3.png" class="loading-style2">
</a>
</li>
<li class="item fore4">
<a>
<img width="250" height="164" src="img/4.png" class="loading-style2">
</a>
</li>
<li class="item fore5">
<a>
<img width="250" height="164" src="img/5.png" class="loading-style2">
</a>
</li>
<li class="item fore6">
<a>
<img width="250" height="164" src="img/6.png" class="loading-style2">
</a>
</li>
<li class="item fore7">
<a>
<img width="250" height="164" src="img/7.png" class="loading-style2">
</a>
</li>
</ul>
</body>
Css的代码
<style type="text/css">
ul {
width: 1250px;
height: 200px;
overflow: hidden;
padding: 0px;
margin: 0px;
}
li {
float: left;
list-style: none;
width: 250px;
height: 200px;
}
</style>
jQuery的代码
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//document 获取是页面
$(document).ready(function(){
var Ul=$('.mscroll-ul');
var timer;
new Gundong().start();
Ul.hover(function(){
clearInterval(timer);
}, function(){
new Gundong().start();
})
//创建让其开始滚动的构造函数
function Gundong(){
this.start=function(){
if(Ul.children().length<this.maxLength){
Ul.append(Ul.children().clone());
}
timer=setInterval(timery,1000);
if(Ul.children().length<5){
clearInterval(timer);
}
}
timery=function(){
var img=Ul.children().eq(0);
var left=img.children().eq(0).width();
img.animate({
"marginLeft":(-1*left)+'px'
},1000,function(){
$(this).css("margin-left","auto").appendTo(Ul);
});
}
}
});
})
</script>
4426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
