码迷,mamicode.com
首页 > Web开发 > 详细

js 实现横向滚动轮播并中间暂停下

时间:2019-09-04 18:50:08      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:lan   script   contain   src   images   app   body   turn   parse   

效果:

技术图片

 

 

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>滚动+停顿</title>
        <style type="text/css">
            body {
                margin: 0;
            }

            #container {
                position: relative;
                height: 200px;
                overflow: hidden;
            }

            #list {
                position: absolute;
                z-index: 1;
                width: 4200px;
                height: 200px;
            }

            #list .item {
                float: left;
                text-align: center;
            }

            .slide {
                width: 200px;
                height: 200px;
            }
        </style>
        <script src="js/jquery.js"></script>
    </head>
    <body>
        <div id="container" class="container">
            <div id="list"></div>
        </div>
        <script type="text/javascript" language=javascript>
            window.qglist = [{
                    gimg: ‘img/1.jpg‘,
                    gname: ‘111‘
                },
                {
                    gimg: ‘img/2.jpg‘,
                    gname: ‘222‘
                },
                {
                    gimg: ‘img/3.jpg‘,
                    gname: ‘333‘
                }
            ];
            initScroll();

            function initScroll() {
                var len = window.qglist.length,
                    j = 0,
                    l = window.qglist.length - 1,
                    string1 = makeStr(window.qglist, l),
                    string2 = makeStr(window.qglist, 0);
                $(‘#list‘).append(string1);
                while (j < len) {
                    var string = makeStr(window.qglist, j);
                    $(‘#list‘).append(string);
                    j++;
                }
                $(‘#list‘).append(string2);
                window.scrWid = $(‘.container‘)[0].offsetWidth + ‘px‘;
                $(‘#list‘).css("left", ‘-‘ + scrWid);
                $(‘.item‘).css("width", scrWid);
                var container = $(‘#container‘),
                    list = document.getElementById(‘list‘),
                    index = 1,
                    timer;

                function animate(offset, unit) {
                    var newLeft = parseInt(list.style.left) - unit,
                        newL = Math.abs(newLeft),
                        scrW = parseInt(window.scrWid),
                        num = newL % scrW;
                    if (num == 0) {
                        stop();
                        setTimeout(function() {
                            play();
                        }, 2000);
                    }
                    list.style.left = newLeft + ‘px‘;
                    //无限滚动判断
                    if (newLeft > offset) {
                        list.style.left = offset * len + ‘px‘;
                    }
                    if (newLeft < offset * (len + 1)) {
                        list.style.left = offset + ‘px‘;
                    }
                }

                function play() {
                    //重复执行的定时器
                    timer = setInterval(function() {
                        start();
                    }, 1)
                }

                function stop() {
                    clearInterval(timer);
                }

                function start() {
                    if (index > len) {
                        index = 1
                    }
                    var n = parseInt(scrWid);
                    animate(-n, 1);
                    index += 1;
                };
                if (len > 1) {
                    play();
                }
            }

            function makeStr(arr, n) {
                var str = "<div class=‘item‘><div>" +
                    "<img class=‘slide‘ src=‘" + arr[n].gimg + "‘></div></div>";
                return str;
            }
        </script>
    </body>
</html>

 

js 实现横向滚动轮播并中间暂停下

标签:lan   script   contain   src   images   app   body   turn   parse   

原文地址:https://www.cnblogs.com/linjiangxian/p/11460764.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!