js实现图片无缝循环跑马灯
2024-08-30 14:33:42
html 代码
<div class="myls-out-div" style="overflow: hidden;">
<ul id="mylspaomadeng" class="myls-ul" >
<li class="myls-li">
<img class="myls-img" src="img/indexImg/myls1.png" />
</li>
<li class="myls-li">
<img class="myls-img" src="img/indexImg/myls2.png" />
</li>
<li class="myls-li">
<img class="myls-img" src="img/indexImg/myls3.png" />
</li>
<li class="myls-li">
<img class="myls-img" src="img/indexImg/myls4.png" />
</li>
</ul>
</div>
css
.myls-out-div {
width: 100%;
height: 212px;
background-color: #fafafa;
float: left;
overflow: hidden;
}
.myls-img {
height: 100%;
}
.myls-ul{
float: left;
height: 100%;
position: relative;
margin: 0px;
padding: 0px;
}
.myls-li{
list-style: none;
display: inline-block;
float: left;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
height: 100%;
}
js代码
function mylsRunHorseLight() {
if (mylsTimer != null) {
clearInterval(mylsTimer);
}
var oUl = document.getElementById("mylspaomadeng");
if(oUl != null){
oUl.innerHTML += oUl.innerHTML;
oUl.innerHTML += oUl.innerHTML;
oUl.innerHTML += oUl.innerHTML;
var lis = oUl.getElementsByTagName('li');
var lisTotalWidth = 0;
var resetWidth = 0;
for (var i = 0; i < lis.length; i++) {
lisTotalWidth += lis[i].offsetWidth;
}
for (var i = 1; i <= lis.length / 4; i++) {
resetWidth += lis[i].offsetWidth;
}
oUl.style.width = lisTotalWidth + 'px';
var left = 0;
mylsTimer = setInterval(function() {
left -= 1;
if (left <= -resetWidth) {
left = 0;
}
oUl.style.left = left + 'px';
}, 20)
$("#mylspaomadeng").hover(function() {
clearInterval(mylsTimer);
}, function() {
clearInterval(mylsTimer);
mylsTimer = setInterval(function() {
left -= 1;
if (left <= -resetWidth) {
left = 0;
}
oUl.style.left = left + 'px';
}, 20);
})
}
}
注意事项
正常来说，宽度是自动获取进行计算的。在普通的工程下都没有问题，在 Spring Boot 项目中，我发现此处失效，查看原因是因为图片加载过慢，没有找到特别好的解决办法，直接将宽度限制死了。宽度的两种方法大家根据自身需要选择。目前失效的问题只出现在了 Spring Boot 工程上。
最新文章
- 第三课：sea.js模块加载原理
- cmd 下通过NTML代理访问Maven 库
- 【PHP面向对象(OOP)编程入门教程】15.static和const关键字的使用（self::）
- Total Commander 常用快捷键（并附快捷键大全）
- <转>梳理：提高前端性能方面的处理以及不足
- Building a RESTful Web Service(转)
- 修改WCF的默认序列化格式
- JavaScript--我发现！原来你是这样的JS（1）
- Linux-安装FFmpeg
- 【C++ Primer 第13章】1. 拷贝控制、赋值和销毁
- Wifi OKC 验证
- tensorflow报错error,tf.concat Expected int32, got list containing Tensors of type '_Message' instead
- UVa140 Bandwidth 【最优性剪枝】
- POJ 3635 - Full Tank? - [最短路变形][手写二叉堆优化Dijkstra][配对堆优化Dijkstra]
- 20165303学习基础和C语言基础调查
- C#读取文件夹下所有指定类型，并返回相应类型数据
- Javascript短路运算||和&&
- css长度
- android DDMS中的内存监测工具Heap
- 15.Generator 函数的语法