<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无限滚动</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0}
.box{width: 540px;height: 384px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}
ul{width: 1620px;height: 384px;list-style: none;position: relative;background: #000}
li img{width: 100%;height: 100%;}
li{float: left;width: 270px;height: 384px;}
</style>
</head>
<body>
<!--结构六张图片,最后两张和前面两张相同,box作为窗口,ul相当于滚动条-->
<div class="box">
<ul>
<li><img src="img/movie01.jpg"></li>
<li><img src="img/movie02.jpg"></li>
<li><img src="img/movie03.jpg"></li>
<li><img src="img/movie04.jpg"></li>
<li><img src="img/movie01.jpg"></li>
<li><img src="img/movie02.jpg"></li>
</ul>
</div>
</body>
</html><script type="text/javascript">
var offset=0;
var timer;
autoPlay()
//定时器改变left值从而使ul开始滚动
function autoPlay(){
timer=setInterval(function(){
offset+=-1
if(offset<=-1080){
offset=0;
}
$('ul').css('left',offset)
},10);
}
//给li加hover事件移入时候兄弟元素显示遮罩,移出都不显示
$('li').hover(
function(){
clearInterval(timer);
$(this).siblings('li').stop().fadeTo(100,0.5);
$(this).stop().fadeTo(100,1);
},
function(){
autoPlay()
$('li').stop().fadeTo(100,1)
})
</script>
jq无限滚动效果
最新推荐文章于 2025-05-20 10:59:52 发布