js代码:
var scroll = document.getElementById('scrollCont');
var soul = scroll.getElementsByTagName('ul')[0];
var aList = soul.getElementsByTagName('li');
var prev = document.getElementById('prevs');
var next = document.getElementById('nexts');
var speed = 2;
soul.innerHTML += soul.innerHTML;
soul.style.width = aList[0].offsetWidth * aList.length + 'px';
function carouselScroll() {
if (soul.offsetLeft < -soul.offsetWidth / 2) {
soul.style.left = '0';
}
if (soul.offsetLeft > 0) {
soul.style.left = -soul.offsetWidth / 2 + 'px';
}
soul.style.left = soul.offsetLeft - speed + 'px';
}
var timer = setInterval(carouselScroll, 30);
scroll.onmouseover = function () {
clearInterval(timer)
}
scroll.onmouseout = function () {
timer = setInterval(carouselScroll, 30);
}
prev.onclick=function (){
speed = 2;
}
next.onclick=function (){
speed = -2;
}
html结构:
<div id="scroWrap">
<a href="javascript:;" class="prev" id="prevs"><img src="dpibleEeJianLeft.png" alt=""></a>
<div id="scrollCont">
<ul>
<li><img src="doubleDiybg1.png" alt=""></li>
<li><img src="doubleDiybg2.png" alt=""></li>
<li><img src="doubleDiybg3.png" alt=""></li>
</ul>
</div>
<a href="javascript:;" class="next" id="nexts"><img src="dpibleEeJianRight.png" alt=""></a>
</div>