效果图
思路分析:
1、开启一个定时器
方法名:window.setInterval(code,MilliSec),每隔指定的时间就执行code,无限次执行。
2、定时器函数主要是用来执行图片轮播的效果
3、当鼠标放在图片上面时,图片就停止了轮播的效果 清除了定时器
方法名:window.clearInterval (timer),清除指定的定时器。
4、当鼠标离开图片上面时,图片继续在执行轮播的效果 重新开启了定时器功能
5、当鼠标放在li标签上面时,图片就停止了轮播的效果 清除了定时器
6、当鼠标放在li标签上面时,还会显示li标签上面对应的数字的图片
7、当鼠标离开li标签上面时,图片就会继续开始轮播的效果 重新开启了定时器功能
8、li标签上面的高亮效果,它是随着图片滚动而滚动。
HTML代码
- 1
- 2
- 3
- 4
- 5
- 6
JS代码
window.οnlοad=function(){
timer=setInterval("imgScroll()",500);
var scroll_number=document.getElementById('scroll_number');
scrLi=scroll_number.getElementsByTagName('li');
scrLiLen=scrLi.length;
}
var n=2;
function imgScroll(){
for(var i=0;i
scrLi[i].className="";
}
scrLi[n-1].className="scroll_number_over";
var imgObj=document.getElementById('dd_scroll');
imgObj.src="images/dd_scroll_"+n+".jpg";
n++;
if(n>6){
n=1;
}
}
function stopScroll(imgN){
if(imgN){
n=imgN;
imgScroll();
}
clearInterval(timer);
}
function goon(){
timer=setInterval('imgScroll()',500);
}