PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

轮播图怎么做

angryTom
angryTom 原创
2019-08-03 14:25:55 9011浏览

效果图

html.jpg

思路分析:

  1、开启一个定时器

    方法名:window.setInterval(code,MilliSec),每隔指定的时间就执行code,无限次执行。

  2、定时器函数主要是用来执行图片轮播的效果

  3、当鼠标放在图片上面时,图片就停止了轮播的效果 清除了定时器

    方法名:window.clearInterval (timer),清除指定的定时器。

  4、当鼠标离开图片上面时,图片继续在执行轮播的效果  重新开启了定时器功能

  5、当鼠标放在li标签上面时,图片就停止了轮播的效果 清除了定时器

  6、当鼠标放在li标签上面时,还会显示li标签上面对应的数字的图片

  7、当鼠标离开li标签上面时,图片就会继续开始轮播的效果  重新开启了定时器功能

  8、li标签上面的高亮效果,它是随着图片滚动而滚动。

HTML代码

<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代码

<script type="text/javascript">
window.οnlοad=function(){
timer=setInterval("imgScroll()",500);
var scroll_number=document.getElementById(&#39;scroll_number&#39;);
scrLi=scroll_number.getElementsByTagName(&#39;li&#39;);
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(&#39;dd_scroll&#39;);
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(&#39;imgScroll()&#39;,500);
}
</script>



声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
上一条:fetch什么意思 下一条:js函数的回调