這篇文章主要介紹如何基于JavaScript實(shí)現(xiàn)無縫滾動(dòng)效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供成都網(wǎng)站制作、做網(wǎng)站、網(wǎng)站策劃、網(wǎng)頁設(shè)計(jì)、
域名注冊(cè)、
虛擬主機(jī)、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。
首先應(yīng)該區(qū)分樣式中的絕對(duì)定位和相對(duì)定位，一般來說，移動(dòng)的單位為絕對(duì)定位，在這個(gè)實(shí)例中，移動(dòng)的Ul就是絕對(duì)定位 ，否則它根本無法滾動(dòng)，而它相對(duì)于div1滾動(dòng) ，則div1就作為他的相對(duì)定位。
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;這段代碼是實(shí)現(xiàn)無縫滾動(dòng)的核心，使之可以在不論左右滾動(dòng)的時(shí)候都有下一步圖片接上去。
在操作或者進(jìn)行比較的時(shí)候，都要用offset取值來進(jìn)行操作或者比較！?。?/p>
代碼：
無縫滾動(dòng)2
*{
padding: 0;
margin:0;
}
#div1{
position: relative;
width: 800px;
height: 200px;
background:red;
margin:100px auto;
overflow: hidden;
}
#div1 ul{
position: absolute;
left: 0;
top: 0;
}
#div1 ul li{
float: left;
list-style: none;
width: 200px;
height: 200px;
}
window.onload=function()
{
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oDiv.getElementsByTagName('li');
var aA = document.getElementsByTagName('a');
var speed = 3;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
var timer=setInterval(move,30);
function move()
{
if (oUl.offsetLeft<=-oUl.offsetWidth/2) {
oUl.style.left="0";
}
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
};
oDiv.onmouseover=function()
{
clearInterval(timer);
};
oDiv.onmouseout=function()
{
timer=setInterval(move,30);
};
aA[0].onclick=function()
{
speed=-3;
};
aA[1].onclick=function()
{
speed=3;
};
};
向左
向右
重慶分公司
重慶分公司