领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

50-jquery无限循环滚动图片 jquery怎么循环数据

nixiaole 2024-12-25 14:45:39 知识剖析 9 ℃

<!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>

Tags：

猜你喜欢

最近发表
标签列表