网站首页 > 开源技术 正文
<!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>
猜你喜欢
- 2024-12-07 纯JS手写轮播图(代码逻辑清晰，通俗易懂)
- 2024-12-07 jQuery 事件详解
- 2024-12-07 自学Python的学习顺序，知识要点
- 2024-08-02 js 播放 图片 序列帧（js展示图片）
- 2024-08-02 ## web前端必学功法之一:秒表实现
- 2024-08-02 入门Python400集免费分享，让python代码更快的3个小技巧
- 2024-08-02 js+css实现3D打年兽小游戏，老好玩了
- 2024-08-02 爬虫软件(爬虫python入门)（爬虫工具软件）
- 2024-08-02 web前端项目详解:OPPO首页进度条特效(定时轮播)
- 2024-08-02 「前端进阶」高性能渲染十万条数据(时间分片)
欢迎 你 发表评论:
- 05-16东契奇:DFS训练时喷了我很多垃圾话 我不懂他为什么比赛不这么干
- 05-16这两球很伤!詹姆斯空篮拉杆不中 DFS接里夫斯传球空接也没放进
- 05-16湖人自媒体调查:89%球迷希望DFS回归79%希望詹姆斯回归
- 05-16Shams:湖人得到全能球员DFS 节省了1500万奢侈税&薪金空间更灵活
- 05-16G5湖人胜率更高!詹姆斯不满判罚，DFS谈5人打满下半场:这很艰难
- 05-16DFS:当东契奇进入状态 所有防守者在他面前都像个圆锥桶
- 05-16上一场9中6!DFS:不能让纳兹-里德这样的球员那么轻松地投三分
- 05-16WIDER FACE评测结果出炉:滴滴人脸检测DFS算法获世界第一
- 最近发表
-
- 东契奇:DFS训练时喷了我很多垃圾话 我不懂他为什么比赛不这么干
- 这两球很伤!詹姆斯空篮拉杆不中 DFS接里夫斯传球空接也没放进
- 湖人自媒体调查:89%球迷希望DFS回归79%希望詹姆斯回归
- Shams:湖人得到全能球员DFS 节省了1500万奢侈税&薪金空间更灵活
- G5湖人胜率更高!詹姆斯不满判罚，DFS谈5人打满下半场:这很艰难
- DFS:当东契奇进入状态 所有防守者在他面前都像个圆锥桶
- 上一场9中6!DFS:不能让纳兹-里德这样的球员那么轻松地投三分
- WIDER FACE评测结果出炉:滴滴人脸检测DFS算法获世界第一
- 湖人自媒体调查:89%球迷希望DFS回归 79%希望詹姆斯回归
- 一觉醒来湖人苦盼的纯3D终于到位 DFS能带给紫金军多少帮助
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论，来添加一个吧(●'◡'●)