先放上html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>無縫滾動</title>
<link rel="stylesheet" href="static/css/aio.css" />
</head>
<body>
<h1>無縫滾動</h1>
<div class="btn l-btn" id="l-btn"><</div>
<div class="btn r-btn" id="r-btn">></div>
<div class="banner" id="banner">
<ul class="move" id="move">
<li><a href="#"><img src="static/images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="static/images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="static/images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="static/images/4.jpg" alt=""></a></li>
</ul>
</div>
<script type="text/javascript" src="static/js/test.js"></script>
</body>
</html>接下來就是css文件對頁面的格式進行了簡單的佈局。
/*!/css/demo.scss*/
body{
text-align: center;
background-color: #FFCCFF;
}
.banner {
position: relative;
margin: 50px auto 0;
width: 800px;
height: 120px;
border: 2px solid #fff;
overflow: hidden;
}
.banner .move {
position: absolute;
}
.banner ul {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0;
}
.banner ul li {
display: inline-block;
}
.btn {
margin-top: 40px;
width: 30px;
height: 100px;
background-color: rgba(255, 255, 255, .3);
line-height: 100px;
text-align: center;
font-size: 60px;
font-weight: bold;
cursor: pointer;
}
.l-btn {
float: left;
}
.r-btn {
float: right;
}
接下就是原生的js代碼
window.onload =function() {
var oDiv = document.getElementById('banner');
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var speed = -2;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width = oLi[0].offsetWidth*oLi.length+'px';
function move(){
oUl.style.left = oUl.offsetLeft +speed +"px";
if(oUl.offsetLeft < -oUl.offsetWidth/2){ //寬度沒有負值，但是offsetLeft有，所以（-）不能忘記
oUl.style.left = 0;
}
if(oUl.offsetLeft > 0){
oUl.style.left = -oUl.offsetWidth/2 + 'px';
}
}
var time = setInterval(move,30);
//鼠標放上去和移出的暫停效果
oDiv.onmouseover = function(){
clearInterval(time);
}
oDiv.onmouseout = function(){
time = setInterval(move,30);
}
var lBtn =document.getElementById('l-btn');
var rBtn =document.getElementById('r-btn');
// 左右控制的效果
lBtn.onclick = function(argument) {
speed = -2;
}
rBtn.onclick =function(){
speed = 2;
}
}
二，我們先申請一個speed變量，因爲到後面 我們可以用它來控制速度和滾動的方向。
三，動態多創建一份li元素，這裏不好解釋，大家可以註釋之後看代碼。就能明白它的意義了。
四，爲了能讓oUl的寬度裝下所有的oLi,所以用一個oLi的寬度去乘以oLi的length.加上px就可以了（ps:一定要加‘px’,除非寬度是0.因爲style.width是個string類型）
五，在move函數裏面，主要就是對位置的判斷了。大家可以自己去琢磨一下。（代碼無縫滾動效果的原理是：改變了div 的left值。）
我自己在寫的時候，總是搞不清element.style.left 和element.offsetLeft。如果你也是一樣， 請戳這裏！