js 实现横向轮播效果

最新推荐文章于 2023-03-03 17:10:20 发布

Macdull2014

最新推荐文章于 2023-03-03 17:10:20 发布

阅读量199

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/linjiangxian/p/11460760.html

版权

参考：https://www.cnblogs.com/LIUYANZUO/p/5679753.html

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>js横向轮播</title>
        <style type="text/css">
            body {
                margin: 0;
            }

            #container {
                position: relative;
                width: 100%;
                height: 300px;
                overflow: hidden;
                z-index: -1;
            }

            #list {
                position: absolute;
                width: 4200px;
                height: 300px;
            }

            #list .img {
                float: left;
                /* width: 375px; */
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="list"></div>
        </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        window.onload = function() {
            var container = document.getElementById('container'),
                list = document.getElementById('list'),
                index = 1;
            $('#list').css('left', -screen.width + 'px');
            var timer;
            var imgList = [{
                        src: 'img/1.jpg'
                    },
                    {
                        src: 'img/2.jpg'
                    },
                    {
                        src: 'img/3.jpg'
                    },
                    {
                        src: 'img/4.jpg'
                    },
                    {
                        src: 'img/5.jpg'
                    }
                ],
                l = imgList.length - 1,
                len = imgList.length,
                w = screen.width,
                string = '';
            string = makeStr(imgList, l);
            $('#list').append(string);
            var j = 0;
            while (j < imgList.length) {
                string = makeStr(imgList, j);
                $('#list').append(string);
                j++;
            }
            string = makeStr(imgList, 0);
            $('#list').append(string);
            $('#list .img').css('width', screen.width + 'px');

            function makeStr(arr, i) {
                string = "<div class='img' style='background:url(" +
                    arr[i].src + ") no-repeat;background-size:100%'/></div>";
                return string;
            }

            function animate(offset) {
                var newLeft = parseInt(list.style.left) + offset;
                list.style.left = newLeft + 'px';
                if (newLeft > -w) {
                    list.style.left = w * len + 'px';
                }
                if (newLeft < -w * len) {
                    list.style.left = -w + 'px';
                }
            }

            function play() {
                timer = setInterval(function() {
                    start();
                }, 2000)
            }

            function start() {
                index += 1;
                if (index > len) {
                    index = 1
                }
                animate(-w);
            };

            function stop() {
                clearInterval(timer);
            }
            if (imgList.length > 1) {
                play();
            }
        }
    </script>
</html>

转载于:https://www.cnblogs.com/linjiangxian/p/11460760.html

Macdull2014

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 实现横向轮播效果

参考：https://www.cnblogs.com/LIUYANZUO/p/5679753.htmlhtml:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" cont...
复制链接

扫一扫