本文摘自PHP中文网,作者angryTom,侵删。
效果图
思路分析:
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 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < body >
< div id = "content" >
< div class = "scroll_top" ></ div >
< div class = "scroll_mid" >
< img src = "images/dd_scroll_1.jpg" alt = "轮换显示的图片广告" id = "dd_scroll" οnmοuseο ver = "stopScroll()" οnmοuseο ut = "goon()" />
< div id = "scroll_number" >
< ul >
< li class = "scroll_number_over" οnmοuseο ver = "stopScroll(1)" οnmοuseο ut = "goon()" >1</ li >
< li οnmοuseο ver = "stopScroll(2)" οnmοuseο ut = "goon()" >2</ li >
< li οnmοuseο ver = "stopScroll(3)" οnmοuseο ut = "goon()" >3</ li >
< li οnmοuseο ver = "stopScroll(4)" οnmοuseο ut = "goon()" >4</ li >
< li οnmοuseο ver = "stopScroll(5)" οnmοuseο ut = "goon()" >5</ li >
< li οnmοuseο ver = "stopScroll(6)" οnmοuseο ut = "goon()" >6</ li >
</ ul >
</ div >
</ div >
< div class = "scroll_end" ></ div >
</ div >
</ body >
|
JS代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <script type= "text/javascript" >
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<scrLiLen;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);
}
</script>
|
以上就是轮播图怎么做的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
轮播图怎么做
vue.js怎样写一个轮播图
bootstrap的轮播图怎么实现
css实现轮播图效果(附代码)
html轮播图如何实现
如何使用layui实现网页轮播图
利用css如何实现图片轮播效果?(代码示例)
怎样用css实现无缝轮播图切换?
css制作轮播图
更多相关阅读请进入《轮播图》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 轮播图怎么做