基于JavaScript实现焦点图轮播效果(2)

//箭头切换实现 next.onclick = function(){ if(index == 7){ index = 1; }else{ index += 1; } show_dots(); if(!turned){ turn(-600); } }; pre.onclick = function(){ if(index == 1){ index = 7; }else{ index -= 1; } show_dots(); if(!turned){ turn(600); } };

3.底部按钮实现

　　按钮与箭头的不同，在于点击它可以切换到任意一张图片，所以在对切换函数turn()传入参数前要先做一个计算。另外按钮对应样式的变化也不能忘记。

//按钮切换样式 function show_dots(){ for(var i = 0; i < dots.length; i++){ if(dots[i].className == 'on'){ dots[i].className = ''; break; } } dots[index - 1].className = 'on'; } //按钮切换实现 for(var i = 0; i < dots.length; i++){ dots[i].onclick= function(){ if(this.className == 'on'){ return; } var my_index = parseInt(this.getAttribute('index')); //注意! index是自定义属性 var offset = -600 * (my_index - index);　　　　　　　　　//计算切换位移量 if(!turned){ turn(offset); } index = my_index; show_dots(); } }

4. 自动播放

　　自动播放自然就是设置定时器和清除定时器的问题，这里不再赘述。

//定时动画 function play(){ time = setInterval(function(){ next.onclick(); },3000); } //动画停止 function stop(){clearInterval(time);} play(); box.onmouseover = stop; box.onmouseout = play;

最后附上demo和源码链接：demo、源码。