http://www.bydrmz.com

                                                                  【新疆快三平台app】轮播图怎么做-js教程

                                                                  效果图

                                                                  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_e[nd"></div></div></body>

                                                                  JS代码

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

                                                                  郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

                                                                  上一篇:WordPress主题加密怎么破解-WordPress
                                                                  下一篇:没有了