图片自动轮播+左右点击+圆点，手动切换后图片自动轮播就乱套了怎么改？

Question

图片自动轮播+左右点击+圆点，手动切换后图片自动轮播就乱套了怎么改？

发布于
2016-09-27

更新于
2016-09-27

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/css/font-awesome.css">
    <style type="text/css">    
        body{
            background: #f1f1f1;
        }
        a{
            text-decoration: none;
        }
        img{
            width: 320px;
            height: 320px;
        }
        .container1{
            width: 320px;
            height: 320px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
        }
        .container1>a{
            width: 20px;
            height: 30px;
            line-height: 30px;
            position: absolute;
            left: 0;
            top: 150px;
            color: rgba(0,0,0,0.3);
            font-size: 30px;
            text-align: center;
        }

        .container1>a:nth-child(2){
            position: absolute;
            left: 300px;
        }
        .container1>a:hover{
            background: rgba(0,0,0,0.3);
            color: #fff;
        }
        .container1 .ui-page-item{
            width: 100px;
            height: 10px;
            position: absolute;
            bottom: 10px;
            right: 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
        }
        .container1 .ui-page-item span{
            width: 5px;
            height: 5px;
            border: 2px solid rgba(255,255,255,0.3);
            background:rgba(0,0,0,0.4);
            border-radius: 50%;
            transition: 0.2s;
        }
        .container1 .ui-page-item span:hover{
            background: rgba(255,255,255,0.4);
            border-color: rgba(0,0,0,0.4);
        }
        .active{ color:#fff10a; font-size:32px; font-weight:700;}
    </style>
</head>
<body>
    <div class="container1" id="carousel">
        <a href="#" id="oleft"><i class="fa fa-angle-left"></i></a>
        <a href="#" id="oright"><i class="fa fa-angle-right"></i></a>
        <div class="ui-page-item">
            <span class="ui-page-link"></span>
            <span class="ui-page-link"></span>
            <span class="ui-page-link"></span>
            <span class="ui-page-link"></span>
            <span class="ui-page-link"></span>
        </div>
        <div id="lunbo">
            <a href="#">
                <img src="http://i3.mifile.cn/a4/3d43e725-326f-43e1-a373-c49eabf52b21http://i3.mifile.cn/a4/3d43e725-326f-43e1-a373-c49eabf52b21">
            </a>
            
        </div>
    </div>    

    <script>
        var oCar = document.getElementById('carousel');
        var oLeft = document.getElementById('oleft');
        var oRight = document.getElementById('oright');
        var oImg = document.getElementsByTagName('img')[0];
        var arrUrl = ['http://i3.mifile.cn/a4/3d43e725-326f-43e1-a373-c49eabf52b21','http://i3.mifile.cn/a4/73af3040-727c-4b5d-846f-6e0d60db86a1','http://i3.mifile.cn/a4/fd65a053-4b78-4159-a866-72d51f63900c','http://i3.mifile.cn/a4/2bffe653-bd4f-44b1-8332-8fac13f2d66e','http://i3.mifile.cn/a4/5ee09922-333b-40cd-bf40-792d743419fa'];
        var aSpan = document.getElementsByTagName('span');
        var num = 0;
        //定時器
        function autoPlay() {
            var    timer = setInterval(function(){
                num++;
                num%= arrUrl.length;
                fnTab();
            },3000);
        }
        // 有用戶來操作的定時器，開啟之前一定要先關
        setTimeout(autoPlay,1000);
        oCar.onmouseover = function(){
            clearTimeout(timer);
        }
        oCar.onmouseout = autoPlay;
        // 初始化
        function fnTab(){
            oImg.src = arrUrl[num];
            for (var i = 0; i < aSpan.length; i++) {
                aSpan[i].className = '';
            }
            aSpan[num].className = 'active';
        }
        fnTab();
        //鼠標放上去顯示本塊內容
        for (var i = 0; i < aSpan.length; i++) {
            aSpan[i].index = i;
        
            // 索引值
            aSpan[i].onmouseover = function(){
                num = this.index;
                fnTab();
            }
        }
        // 左右轮播点击事件
        oLeft.onclick = function(){
            num-- ;
            if (num == -1) {
                num = arrUrl.length - 1
            }
            fnTab();
        }
        oRight.onclick = function(){
            num ++
            if (num == arrUrl.length) {
                num = 0
            }
            fnTab();
        }
    </script>        
</body>
</html>

前端 javascript html

阅读 7.6k

1 个回答

得票最新

盲选C

15116

发布于
2016-09-28

✓ 已被采纳

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/css/font-awesome.css">
        <style type="text/css">
            body {
                background: #f1f1f1;
            }
            
            a {
                text-decoration: none;
            }
            
            img {
                width: 320px;
                height: 320px;
            }
            
            .container1 {
                width: 320px;
                height: 320px;
                overflow: hidden;
                margin: 100px auto;
                position: relative;
            }
            
            .container1>a {
                width: 20px;
                height: 30px;
                line-height: 30px;
                position: absolute;
                left: 0;
                top: 150px;
                color: rgba(0, 0, 0, 0.3);
                font-size: 30px;
                text-align: center;
            }
            
            .container1>a:nth-child(2) {
                position: absolute;
                left: 300px;
            }
            
            .container1>a:hover {
                background: rgba(0, 0, 0, 0.3);
                color: #fff;
            }
            
            .container1 .ui-page-item {
                width: 100px;
                height: 10px;
                position: absolute;
                bottom: 10px;
                right: 20px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-end;
            }
            
            .container1 .ui-page-item span {
                width: 5px;
                height: 5px;
                border: 2px solid rgba(255, 255, 255, 0.3);
                background: rgba(0, 0, 0, 0.4);
                border-radius: 50%;
                transition: 0.2s;
            }
            
            .container1 .ui-page-item span:hover {
                background: rgba(255, 255, 255, 0.4);
                border-color: rgba(0, 0, 0, 0.4);
            }
            
            .active {
                color: #fff10a;
                font-size: 32px;
                font-weight: 700;
            }
        </style>
    </head>

    <body>
        <div class="container1" id="carousel">
            <a href="#" id="oleft"><i class="fa fa-angle-left"></i></a>
            <a href="#" id="oright"><i class="fa fa-angle-right"></i></a>
            <div class="ui-page-item">
                <span class="ui-page-link"></span>
                <span class="ui-page-link"></span>
                <span class="ui-page-link"></span>
                <span class="ui-page-link"></span>
                <span class="ui-page-link"></span>
            </div>
            <div id="lunbo">
                <a href="#">
                    <img src="http://i3.mifile.cn/a4/3d43e725-326f-43e1-a373-c49eabf52b21http://i3.mifile.cn/a4/3d43e725-326f-43e1-a373-c49eabf52b21">
                </a>

            </div>
        </div>

        <script>
            var oCar = document.getElementById('carousel');
            var oLeft = document.getElementById('oleft');
            var oRight = document.getElementById('oright');
            var oImg = document.getElementsByTagName('img')[0];
            var arrUrl = ['http://i3.mifile.cn/a4/3d43e725-326f-43e1-a373-c49eabf52b21', 'http://i3.mifile.cn/a4/73af3040-727c-4b5d-846f-6e0d60db86a1', 'http://i3.mifile.cn/a4/fd65a053-4b78-4159-a866-72d51f63900c', 'http://i3.mifile.cn/a4/2bffe653-bd4f-44b1-8332-8fac13f2d66e', 'http://i3.mifile.cn/a4/5ee09922-333b-40cd-bf40-792d743419fa'];
            var aSpan = document.getElementsByTagName('span');
            var num = 0;
            //定時器
            var timer = setInterval(function() {
                num++;
                num %= arrUrl.length;
                fnTab();
            }, 3000);
            // 有用戶來操作的定時器，開啟之前一定要先關
            oCar.onmouseover = function() {
                clearInterval(timer);
            }
            oCar.onmouseout = function() {
                timer = setInterval(function() {
                    num++;
                    num %= arrUrl.length;
                    fnTab();
                }, 3000);
            };
            // 初始化
            function fnTab() {
                oImg.src = arrUrl[num];
                for(var i = 0; i < aSpan.length; i++) {
                    aSpan[i].className = '';
                }
                aSpan[num].className = 'active';
            }
            fnTab();
            //鼠標放上去顯示本塊內容
            for(var i = 0; i < aSpan.length; i++) {
                aSpan[i].index = i;

                // 索引值
                aSpan[i].onmouseover = function() {
                    num = this.index;
                    fnTab();
                }
            }
            // 左右轮播点击事件
            oLeft.onclick = function() {
                num--;
                if(num == -1) {
                    num = arrUrl.length - 1
                }
                fnTab();
            }
            oRight.onclick = function() {
                num++
                if(num == arrUrl.length) {
                    num = 0
                }
                fnTab();
            }
        </script>
    </body>

</html>

clearInterval才行 clearTimeout没用，都是细节问题，注意下就好

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

图片自动轮播+左右点击+圆点，手动切换后图片自动轮播就乱套了怎么改？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？