js动画之无缝滚动
2024-08-21 07:30:48
效果图如下:
HTML代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,ul{
margin:0;
padding:0;
} .list_con{ width:1000px;
height:200px;
border:1px solid #000;
margin:10px auto 0;
background-color:#f0f0f0;
position:relative;
overflow:hidden;
} .list_con ul{
list-style:none;
width:2000px;
height:200px;
position:absolute;
left:0;
top:0;
} .list_con li{
width:180px;
height:180px;
float:left;
margin:10px;
} .btns_con{
width:1000px;
height:30px;
margin:50px auto 0;
position:relative;
} .left,.right{
width:30px;
height:30px;
background-color:gold;
position:absolute;
left:-40px;
top:124px;
font-size:30px;
line-height:30px;
color:#000;
font-family: 'Arial';
text-align:center;
cursor:pointer;
border-radius:15px;
opacity:0.5;
}
.right{
left:1010px;
top:124px;
}
</style>
<script src="js/move.js"></script>
</head>
<body>
<div class="btns_con">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul id="list">
<li><a href=""><img src="data:images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/goods005.jpg" alt="商品图片"></a></li>
</ul> </div>
</body>
</html>
JS代码如下：
window.onload = function(){
// alert(1)
// 1、自动播放-- 左侧 多次循环 left减小
var oList = this.document.getElementById('list')
var oBtn01 = document.getElementById('btn01')
var oBtn02 = document.getElementById('btn02')
var oSlide = document.getElementById('slide')
var num = 0 // left取值
var speed = -5
var oTimer = null
// 程序复制两份产品
oList.innerHTML += oList.innerHTML
// oList.innerHTML = oList.innerHTML + oList.innerHTML
oTimer = setInterval(fnMove, 50)
function fnMove(){
num += speed
// 如果left小于-1000，回到left为0继续左侧移动
if(num < -1000)
{
num = 0
}
if(num>0)
{
num = -1000
}
oList.style.left = num +'px'
}
// 2、左右箭头单击，右 -- 右侧移动 左 -- 左侧移动
oBtn02.onclick = function(){
speed = 5
}
oBtn01.onclick = function(){
speed = -5
}
// 3、鼠标滑过停止播放 - 鼠标离开继续播放
oSlide.onmouseover = function(){
// 停止定时器
clearInterval(oTimer)
}
oSlide.onmouseout = function(){
// 开启定时器
oTimer = setInterval(fnMove, 50)
}
}
最新文章
- spring-HelloWorld
- 基于能量收集的智能家居-2013国家级大学生创业实践项目申报_商业计划书_V0.2
- Turing Test
- JavaScript内的类型转换
- asp.net mvc+EF 递归生成树结构返回json
- 进入MFC讲坛的前言(五)
- Introduction to Programming Contests (stanford)
- winform 自定义分页控件 及DataGridview数据绑定
- Windows查看端口使用状况
- .Net Core 部署在win10 的IIS上注意问题。
- 解决springboot jar包冲突
- Studio 5000编程：如何判断AB PLC系统中的硬件设备是否在正常工作
- ucos中的中断管理
- NFC读写电子便签总结
- Django基础篇--用户权限管理和组管理
- 【Linux】工作管理
- js和java的参数传递方式实际都是一样的，都是按值传递
- Luncene学习 第一天 《入门程序》
- Codeforces 1079 E - The Unbearable Lightness of Weights
- Go Example--通道