切换风格

后盾人PHP论坛-php培训论坛-php教程-PHP视频教程-北京PHP培训

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 206|回复: 3

[web前端] 原生js轮播图出现定时器叠加

[复制链接]
     
  • TA的每日心情
    难过
    2018-6-12 16:11
  • 签到天数: 27 天

    [LV.4]偶尔看看III

    5

    主题

    48

    帖子

    1247

    积分

    高中生

    Rank: 5Rank: 5

    积分
    1247
    活动推广币
    0 个
    后盾币
    1247 个
    注册时间
    2017-12-20
    在线时间
    20 小时
    帖子
    48
    发表于 2018-1-7 20:32:36 | 显示全部楼层 |阅读模式
    快速滑动出现定时间叠加,轮播图的定时器变快,定时器也清楚了,还是不行,论坛代码上传超过限制,用图片代替了,下面我我分开上传代码 Snipastest.png
         
  • TA的每日心情
    难过
    2018-6-12 16:11
  • 签到天数: 27 天

    [LV.4]偶尔看看III

    5

    主题

    48

    帖子

    1247

    积分

    高中生

    Rank: 5Rank: 5

    积分
    1247
    活动推广币
    0 个
    后盾币
    1247 个
    注册时间
    2017-12-20
    在线时间
    20 小时
    帖子
    48
     楼主| 发表于 2018-1-7 20:35:12 | 显示全部楼层
    css和js部分:
    <style type="text/css">
                   
                    *{
                            padding: 0;
                            margin: 0;
                    }
                    #fk{
                            width: 1200px;
                            height: 535px;
                            border: 5px solid blue;
                            margin: 20px auto;
                            position: relative;
                    }
                    #fk img{
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            display: none;
                    }
                    #fk ul{
                            position: absolute;
                            left: 548px;
                            bottom: 23px;
                    }
                    #fk ul li{
                            list-style: none;
                            width: 12px;
                            height: 12px;
                            background: black;
                            float: left;
                            margin-right: 8px;
                            border-radius: 50%;
                    }
            </style>
           
    <script type="text/javascript">
    //        注意:多个方式控制同一块元素效果的时候,一定要走同一个变量

            window.onload = function(){
                    var fk = document.getElementById("fk");
                    var imgs = fk.getElementsByTagName('img');
                    var lis = fk.getElementsByTagName('li');
                   
                    var c = 0;//大总管变量
                   
    //                控制图片切换的函数
                    function run(){
                            c++;
                            if (c==5) {
                                    c=0;
                            }
    //                        循环,让所有的图片隐藏,让所有的li变灰
                            for (var i=0;i<5;i++) {
                                    imgs[i].style.display = 'none';
                                    lis[i].style.background = 'black';
                            }
    //                        让c号图片显示,c号li变红
                            imgs[c].style.display = 'block';
                            lis[c].style.background = '#A10000';
                    }
                    var timer = setInterval(run,1000);
                   
                   
    //                循环,给li加事件
                    for (var i=0;i<lis.length;i++) {
    //                        给i号li加序号
                            lis[i].xuhao = i;
    //                        给i号li加鼠标移入事件
                            lis[i].onmouseover = function(){
                                    c = this.xuhao;
    //                                停止定时器
                                    clearInterval(timer);
    //                        循环,让所有的图片隐藏,让所有的li变灰
                                    for (var i=0;i<5;i++) {
                                            imgs[i].style.display = 'none';
                                            lis[i].style.background = 'black';
                                    }
    //                                让c号对应的图片显示
                                    imgs[c].style.display = 'block';
                                    lis[c].style.background = '#A10000';
                            }
    //                        移入事件结束
                           
    //                        移出事件
                            lis[i].onmouseout = function(){
                                    timer = setInterval(run,1000);
                            }
    //                        移出事件结束
                    }
                   
            }
           
    </script>
         
  • TA的每日心情
    难过
    2018-6-12 16:11
  • 签到天数: 27 天

    [LV.4]偶尔看看III

    5

    主题

    48

    帖子

    1247

    积分

    高中生

    Rank: 5Rank: 5

    积分
    1247
    活动推广币
    0 个
    后盾币
    1247 个
    注册时间
    2017-12-20
    在线时间
    20 小时
    帖子
    48
     楼主| 发表于 2018-1-7 20:35:38 | 显示全部楼层
    html部分:
    <body>
                   
                    <div id="fk">
                            <img src="images/1.jpg" style="display: block;" />
                            <img src="images/2.jpg" />
                            <img src="images/3.jpg" />
                            <img src="images/4.jpg" />
                            <img src="images/5.jpg" />
                            <ul>
                                    <li style="background: #A10000;"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                            </ul>
                    </div>
                   
                   
            </body>
         
  • TA的每日心情
    无聊
    2018-3-3 00:30
  • 签到天数: 43 天

    [LV.5]常住居民I

    9

    主题

    88

    帖子

    1910

    积分

    高中生

    Rank: 5Rank: 5

    积分
    1910
    活动推广币
    0 个
    后盾币
    1910 个
    注册时间
    2017-9-19
    在线时间
    44 小时
    帖子
    88
    发表于 2018-1-8 13:57:47 | 显示全部楼层
    你看一下我做的带按钮的轮播图吧 淘宝轮播图.zip (504.24 KB, 下载次数: 20)
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    Archiver|小黑屋|后盾人 人人做后盾 ( 京ICP备12048441号-3 )

    GMT+8, 2018-7-23 02:17 , Processed in 0.115266 second(s), 32 queries .

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表