先是HTML部分
<div id="alternate"><ul class="img_list clear">
<li><a href="#"><img src="1.jpg" /></a></li>
<li><a href="#"><img src="2.jpg" /></a></li>
<li><a href="#"><img src="3.jpg" /></a></li>
<li><a href="#"><img src="4.jpg" /></a></li>
<li><a href="#"><img src="5.jpg" /></a></li>
</ul>
<a href="javascript:;" class="btn_left"></a>
<a href="javascript:;" class="btn_right"></a>
</div>
样式部分：
<style>
body,ul{padding:0;margin:0}
li{list-style:none;}#alternate{
width:900px;
position:relative;
margin:30px auto;
overflow:hidden;
}.btn_left{
width:60px;
height:60px;
position:absolute;
top:223px;
left:10px;
background:url(btn.gif) no-repeat;
opacity:0.3;
filter:alpha(opacity:30);
}
.btn_left:hover{
opacity:1;
filter:alpha(opacity:30);
}.btn_right{
width:60px;
height:60px;
position:absolute;
top:223px;
right:10px;
background:url(btn.gif) no-repeat 0 -60px;
opacity:0.3;
filter:alpha(opacity:30);
}
.btn_right:hover{
opacity:1;
filter:alpha(opacity:30);
}.img_list{
width:45000px;
position:relative;
left:0;
}
.img_list li{
float:left;
}.clear:after{
clear:both;
display:block;
content:"";
height:0;
overflow:hidden;
visibility:hidden;
}</style>
然后是JS方面：
先上一个通过CLASS来获取样式，前面的随笔文章当中有发布过：通过正则写一个较为完美的getByClass函数
function getByClass(oParent,sClass){
var aChild = oParent.getElementsByTagName("*"),
result = [];
for(var i =0;i<aChild.length;i++){
if(aChild[i].className.match(new RegExp("(\\s|^)" + sClass+ "(\\s|$)"))){ //判断是否有该class
result.push(aChild[i]);
};
};
return result;
};
链接外部样式，可以参考 多用途运动框架
<script src="move.js"></script>
主体部分：
<script>
window.onload = function(){
var oUl = document.getElementById("alternate").getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
var aPrev = getByClass(document.getElementById("alternate"),"btn_left")[0];
var aNext = getByClass(document.getElementById("alternate"),"btn_right")[0];
var iNow = 0;
var timer;
//oUl.innerHTML += oUl.innerHTML;oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
aNext.onclick = function(){
clearInterval(timer); //每次点击按钮的时候清楚定时器
if(iNow < aLi.length-1){
iNow++;
}else{
iNow = 0;
};
move(oUl,{left:-aLi[0].offsetWidth*iNow});
timer= setInterval(rollNext,3000); //运行完点击后的代码，才开始定时器，这样确保每次运动的间隔是一样的
};
aPrev.onclick = function(){
clearInterval(timer);
if(iNow !==0){
iNow--;
}else{
iNow = aLi.length-1;
};
move(oUl,{left:-aLi[0].offsetWidth*iNow});
timer= setInterval(rollNext,3000);
};timer= setInterval(rollNext,3000);
function rollNext(){
if(iNow < aLi.length-1){
iNow++;
}else{
iNow = 0;
};
move(oUl,{left:-aLi[0].offsetWidth*iNow});
}function getByClass(oParent,sClass){
var aChild = oParent.getElementsByTagName("*"),
result = [];
for(var i =0;i<aChild.length;i++){
if(aChild[i].className.match(new RegExp("(\\s|^)" + sClass+ "(\\s|$)"))){ //判断是否有该class
result.push(aChild[i]);
};
};
return result;
};
};</script>