js动画之无缝滚动
效果图如下:
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="images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="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)
}
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-06-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录