php制作图片轮播_轮播图怎么做

效果图

思路分析：

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);

}