TypechoJoeTheme

森屿暖树🚀.摘自光年🌸

统计
登录
用户名
密码

JS如何制作网站轮播图

2019-08-03
/
9 评论
/
2,241 阅读
/
正在检测是否收录...
08/03

效果图

我这里用黑冰大佬网站的轮播图做效果

思路分析:

  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('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>
教程
朗读
赞(1)
赞赏
感谢您的支持,我会继续努力哒!

三合一收款

下面三种方式都支持哦

微信
QQ
支付宝
打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦
版权属于:

森屿暖树🚀.摘自光年🌸

本文链接:

https://www.isenyu.cn/161.html(转载时请注明本文出处及文章链接)

评论 (9)
  1. yrddc 作者
    Windows 7 · Google Chrome

    淘宝单号 拼多多单号 快递代发,免费提供底单www.uudanhaowang.com

    2020-04-28 回复
  2. VPS234主机测评 作者
    Windows 10 · Google Chrome

    这种插件蛮多的,不过自己写,自定义效果可能更好一些OωO

    2019-09-16 回复
  3. 阿里云优惠券 作者
    Windows 8.1 · Google Chrome

    朋友 交换链接吗

    2019-08-14 回复
    1. 阿森' s 作者
      MacOS · Safari
      @阿里云优惠券

      ::twemoji:ok::

      2019-08-14 回复
      1. 阿里云优惠券 作者
        Windows 8.1 · Google Chrome
        @阿森' s

        已加贵站链接
        我站:https://www.rakvps.com/
        站名:阿里云优惠券

        2019-08-16 回复
        1. 阿森' s 作者
          iPhone · Safari
          @阿里云优惠券

          你的友链地址?

          2019-08-16 回复
          1. 阿里云优惠券 作者
            Windows 8.1 · Google Chrome
            @阿森' s

            https://www.rakvps.com/ 阿里云优惠券

            2019-08-18 回复
  4. 林阿三 作者
    Windows 10 · Google Chrome

    滴!访客卡!请上车的乘客系好安全带,现在是:Mon Aug 05 2019 03:45:40 GMT+0800 (中国标准时间)

    2019-08-05 回复
  5. Jockie 作者
    Android · Google Chrome

    滴!访客卡!请上车的乘客系好安全带,现在是:Sat Aug 03 2019 15:13:25 GMT+0800 (中国标准时间)

    2019-08-03 回复