效果圖如下:
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)
}
}
------- 知識無價，汗水有情，如需搬運請注明出處，謝謝！
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)