在上一篇图片轮播效果代码（一）的基础上，增加了左右箭头的响应事件，实现了点击左右箭头也可以让图片滚动：
js代码如下：
= lis.length){
pic_index = 0;
}
picChange(pic_index);
pic_index++;
}
//手动轮播
for(var i=0;iSEOver",change,false);
}
function change(event){
var event=event||window.event;
var target=event.target||event.srcElement;
var children = target.parentNode.children;
for(var i=0;i图片切换函数
function picChange(i){
//让所有图片都不显示，所有圆圈都为普通样式
for(var j=0;j图片显示，对应的圆圈高亮
imgs[i].style.display = 'block';
lis[i].style.fontSize = '26px';
lis[i].style.color = '#fff';
}
//当鼠标移近图片区域内，自动播放停止
lunbo.addEventListener("mouSEOver",function(){
clearInterval(pic_time);
},false);
//当鼠标移出图片区域内，自动播放继续
lunbo.addEventListener("mouSEOut",function(){pic_time = setInterval(autobofang,1000); },false);
//后退箭头点击事件，图片会跟着点击事件不断变化
next.addEventListener("click",movenext,false);
function movenext(){
if(item == 2){
item=0;
}
else{
item+=1;
}
picChange(item);
}
prev.addEventListener("click",moveprev,false);
function moveprev(){
if(item == 0){
item=2;
}
else{
item-=1;
}
picChange(item);
}
}
当鼠标点击到箭头，图片会跟着变化，下面的小圆圈也会跟着显示对应图片的高亮效果
总结：
原文链接：https://www.f2er.com/js/47566.html