大家好，欢迎来到IT知识分享网。
无限轮播图效果
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>50-jquery无限循环滚动图片</title>
<style type=”text/css”>
*{
margin: 0; /*外边距：0*/
padding: 0; /*内边距：0*/
}
div{
width: 600px; /*宽：600*/
height: 160px; /*高：160*/
border: #000000 solid 1px; /*边框：黑色 实线 1像素*/
margin: 100px auto; /*外边距：上100像素 左右自动居中*/
position: relative; /*定位：相对定位*/
overflow: hidden; /*溢出：隐藏*/
}
ul{
list-style: none; /*列表样式：无点*/
width: 2100px; /*宽：2100*/
height: 160px; /*高：160*/
}
ul>li{
float: left; /*浮动布局：左浮动*/
}
</style>
<script src=”../static/js/jquery-3.6.0.js”></script>
<script>
$(function(){
var pianyi = 0; // 定义一个偏移量为0
var timer = setInterval(function(){ // 定义一个定时器 50毫秒调用一次
if(pianyi>-1500){ // 如果偏移量大于 -1500
$(‘ul’).css(‘margin-left’, pianyi) // 把ul的样式的左边距设置成偏移量
pianyi -= 5 // 偏移量每次减5
}else{pianyi=0} // 否则（偏移量等于0）
}, 50)
})
</script>
</head>
<body>
<div>
<ul class=”ul1″>
<li><img src=”../static/image/1.jpeg” width=”300px” height=”160px”></li>
<li><img src=”../static/image/2.jpeg” width=”300px” height=”160px” ></li>
<li><img src=”../static/image/3.jpeg” width=”300px” height=”160px” ></li>
<li><img src=”../static/image/4.jpeg” width=”300px” height=”160px” ></li>
<li><img src=”../static/image/5.jpeg” width=”300px” height=”160px” ></li>
<li><img src=”../static/image/1.jpeg” width=”300px” height=”160px”></li>
<li><img src=”../static/image/2.jpeg” width=”300px” height=”160px” ></li>
</ul>
</div>
</body>
</html>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/87401.html
