淘宝首页的图片无缝轮播是如何实现的

发布于 2022-09-03 00:37:16 字数 337 浏览 14 评论 0

用开发者模式看过了，但是还是不知道是如何实现的。
图片描述

知道的只有这些：
1.所有图片放到一个div中，div position：absolute，div overflow：hidden，所有图片float：left。控制left，来进行右移。
2.表面上看轮播图片有5张，1，2，3，4，5.
3.实际div中有7张图片，dom排列顺序为，5，1，2，3，4，5，1

求大神解答啊！

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你的笑 2022-09-10 00:37:16

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>焦点轮播图</title>
    <style type="text/css">
        *{ margin: 0; padding: 0; text-decoration: none;}
        body { padding: 20px;}
        #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
        #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
        #list img { float: left;}
        #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
        #buttons .on {  background: orangered;}
        .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover { background-color: RGBA(0,0,0,.7);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}
    </style>
    <script type="text/javascript">

        window.onload = function () {
            var container = document.getElementById('container');
            var list = document.getElementById('list');
            var buttons = document.getElementById('buttons').getElementsByTagName('span');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');
            var index = 1;
            var len = 5;
            var animated = false;
            var interval = 3000;
            var timer;


            function animate (offset) {
                if (offset == 0) {
                    return;
                }
                animated = true;
                var time = 300;
                var inteval = 10;
                var speed = offset/(time/inteval);
                var left = parseInt(list.style.left) + offset;

                var go = function (){
                    if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
                        list.style.left = parseInt(list.style.left) + speed + 'px';
                        setTimeout(go, inteval);
                    }
                    else {
                        list.style.left = left + 'px';
                        if(left>-200){
                            list.style.left = -600 * len + 'px';
                        }
                        if(left<(-600 * len)) {
                            list.style.left = '-600px';
                        }
                        animated = false;
                    }
                }
                go();
            }

            function showButton() {
                for (var i = 0; i < buttons.length ; i++) {
                    if( buttons[i].className == 'on'){
                        buttons[i].className = '';
                        break;
                    }
                }
                buttons[index - 1].className = 'on';
            }

            function play() {
                timer = setTimeout(function () {
                    next.onclick();
                    play();
                }, interval);
            }
            function stop() {
                clearTimeout(timer);
            }

            next.onclick = function () {
                if (animated) {
                    return;
                }
                if (index == 5) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                animate(-600);
                showButton();
            }
            prev.onclick = function () {
                if (animated) {
                    return;
                }
                if (index == 1) {
                    index = 5;
                }
                else {
                    index -= 1;
                }
                animate(600);
                showButton();
            }

            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function () {
                    if (animated) {
                        return;
                    }
                    if(this.className == 'on') {
                        return;
                    }
                    var myIndex = parseInt(this.getAttribute('index'));
                    var offset = -600 * (myIndex - index);

                    animate(offset);
                    index = myIndex;
                    showButton();
                }
            }

            container.onmouseover = stop;
            container.onmouseout = play;

            play();

        }
    </script>
</head>
<body>

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="img/5.jpg" alt="1"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="5"/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>
</div>

</body>
</html>

回复收藏 0

梦巷 2022-09-10 00:37:16

从第一张图片开始向左移动时,看到的图片依次是1->2->3->4->5->1。
当从5->1，即第七张图片移入完成时，马上将div定位到第二张图片，这样看起来就是无缝的。

回复收藏 0

人心善变 2022-09-10 00:37:16

大概逻辑没问题。
可以下载一个类似功能的插件(比如SuperSlide)，然后看源码就比较好理解了~

回复收藏 0

半夏半凉 2022-09-10 00:37:16

谢谢邀请。这种无缝滚动网上有很多资料。其中bootstrap里面就有，你看看这个例子轮播希望对你有帮助

回复收藏 0

雪若未夕 2022-09-10 00:37:16

其实你要是实现这种情况的话，你就应该当第一张滚动完之后，你就把第一张移除然后将第一张放到所有图片的最后面，之后的依次

回复收藏 0

巾帼英雄 2022-09-10 00:37:16

你可以看看我写的demo，地址：https://github.com/MrZhang123/ES6_Practice/tree/master/ES6lunbo

回复收藏 0

凉世弥音 2022-09-10 00:37:16

大致就是6张图片1，2,3,4,5,1，当到达第五张开始切换，第六张作为缓冲

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #box {
            width: 600px;
            height: 350px;
            position: relative;
            overflow: hidden;
            margin: 20px auto;
        }
        
        #ball {
            width: 4200px;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
        }
        
        #ball li {
            width: 600px;
            line-height: 350px;
            float: left;
            text-align: center;
            font-size: 50px;
        }
        
        #btn {
            width: 180px;
            overflow: hidden;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }
        
        #btn li {
            width: 20px;
            height: 20px;
            margin-right: 10px;
            float: left;
            background: #ffffff;
            opacity: 0.2;
            border-radius: 50%;
        }
        
        #box h3 {
            position: absolute;
            font-size: 40px;
            padding: 10px 5px;
            color: #ffffff;
            background: rgba(0, 0, 0, 0.4);
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            display: none;
            opacity: 0;
        }
        
        #prev {
            left: 0;
        }
        
        #next {
            right: 0;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul id="ball">
            <li style="background:red;">1</li>
            <li style="background:blue;">2</li>
            <li style="background:#d6fc0a;">3</li>
            <li style="background:pink;">4</li>
            <li style="background:green;">5</li>
            <li style="background:yellow;">6</li>
            <li style="background:red;">1</li>
        </ul>
        <ul id="btn">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <h3 id="prev"><</h3>
        <h3 id="next">></h3>
    </div>
</body>
<script>
    var box = document.getElementById('box');
    var ball = document.getElementById('ball');
    var btns = document.getElementById('btn').getElementsByTagName('li');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var flag = true;
    var l = 0;
    //设置第一个焦点高亮
    btns[0].style.opacity = '0.9';
    //自动轮播
    var timer = setTimeout(scroll, 1000);
    //自动轮播函数
    function scroll() {
        l -= 600;
        //判断是否滚到最后一张
        if (l == -4200) {
            l = -600;
            ball.style.left = 0;
        }
        //大图调用运动函数
        move.speedDown({
                dom: ball,
                attr: {
                    left: l
                },
                step: 10,
                callback: function () {
                    //设置循环
                    if (flag == true) {
                        clearTimeout(timer)
                        timer = setTimeout(scroll, 1000);
                    }
                }
            })
            //焦点切换
            //所有焦点非高亮
        for (var i = 0; i < btns.length; i++) {
            btns[i].style.opacity = '0.2';
        }
        //判断大图是否走到最后一张
        if (-l / 600 == 6) {
            btns[0].style.opacity = '0.9';
        }
        //当前位置焦点高亮
        if (btns[-l / 600]) {
            btns[-l / 600].style.opacity = '0.9';
        }
    }
    //点击切换
    for (var i = 0; i < btns.length; i++) {
        btns[i].index = i;
        btns[i].onmouseover = function () {
            //停止自动轮播
            clearTimeout(timer);
            //保证轮播从当前位置开始
            l = this.index * -600;
            //设置焦点高亮
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.opacity = '0.2';
            }
            this.style.opacity = '0.9';
            //调用运动函数，大图切换
            move.speedDown({
                dom: ball,
                attr: {
                    left: this.index * -600
                },
                step: 10
            })
        }
    }
    //滑入停止
    box.onmouseover = function () {
            flag = false;
            clearTimeout(timer)
            prev.style.display = 'block';
            next.style.display = 'block';
            move.speedDown({
                dom: prev,
                attr: {
                    opacity: 100
                },
                step: 100
            })
            move.speedDown({
                dom: next,
                attr: {
                    opacity: 100
                },
                step: 100
            })
        }
    //滑出循环轮播
    box.onmouseout = function () {
        timer = setTimeout(scroll, 1000);
        flag = true;
        move.speedDown({
            dom: prev,
            attr: {
                opacity: 0
            },
            step: 100,
            callback: function () {
                prev.style.display = 'none';
            }
        })
        move.speedDown({
            dom: next,
            attr: {
                opacity: 0
            },
            step: 100,
            callback: function () {
                next.style.display = 'none';
            }
        })
    }
    //返回上一张
    prev.onclick = function () {
        l += 600;
        if (l > 0) {
            l = -3000;
            ball.style.left = -3600 + 'px';
        }
        move.speedDown({
                dom: ball,
                attr: {
                    left: l
                },
                step: 10
            })
        //焦点切换
        //所有焦点非高亮
        for (var i = 0; i < btns.length; i++) {
            btns[i].style.opacity = '0.2';
        }
        //判断大图是否走到最后一张
        if (-l / 600 == 6) {
            btns[0].style.opacity = '0.9';
        }
        //当前位置焦点高亮
        if (btns[-l / 600]) {
            btns[-l / 600].style.opacity = '0.9';
        }
        //阻止文本被选中
        this.onselectstart = function () {
            return false;
        }
    }
    //前进到下一张
    next.onclick = function () {
        l -= 600;
        if (l == -4200) {
            l = -600;
            ball.style.left = 0 + 'px';
        }
        move.speedDown({
                dom: ball,
                attr: {
                    left: l
                },
                step: 10
            })
            //焦点切换
            //所有焦点非高亮
        for (var i = 0; i < btns.length; i++) {
            btns[i].style.opacity = '0.2';
        }
        //判断大图是否走到最后一张
        if (-l / 600 == 6) {
            btns[0].style.opacity = '0.9';
        }
        //当前位置焦点高亮
        if (btns[-l / 600]) {
            btns[-l / 600].style.opacity = '0.9';
        }
        //阻止文本被选中
        this.onselectstart = function () {
            return false;
        }
    }
    
    
    /*move.speedDown({
            dom: div,     //设置运动的元素
            attr: 'width',   //设置变化的属性
            end: 600,        //设置变化的终点
            step: 40,        //步数
            callback: function () {     //回调函数
                self.style.background = "blue";
            }
        })*/

 var move = {
     //获取元素样式
     getStyle: function (obj, attr) {
         return obj.currentStyle ? obj.currentStyle[attr] : window.getComputedStyle(obj, false)[attr];
     },
     //缓冲运动
     speedDown: function (opt) {
         //保存this
         var self = this;
         //清除已有计时器
         clearInterval(opt.dom.timer);
         //添加计时器
         opt.dom.timer = setInterval(function () {
             //假设动画结束
             opt.dom.isMove = true;
             for (key in opt.attr) {
                 if (key == 'opacity') {
                     var start = parseFloat(self.getStyle(opt.dom, key)) * 100;
                 } else {
                     var start = parseFloat(self.getStyle(opt.dom, key));
                 }
                 var len = ((opt.attr[key] - start) / opt.step) > 0 ? Math.ceil((opt.attr[key] - start) / opt.step) : Math.floor((opt.attr[key] - start) / opt.step);

                 if (start != opt.attr[key]) {
                     if (key == 'opacity') {
                         //关闭动画结束的开关
                         opt.dom.isMove = false;
                         opt.dom.style.opacity = (start + len) / 100;
                         opt.dom.style.filter = 'alpha(opacity=' + parseFloat(start + len) + ')';
                     } else {
                         //关闭动画结束的开关
                         opt.dom.isMove = false;
                         opt.dom.style[key] = (start + len) + 'px';
                     }
                 }
                 //判断是否结束动画
                 if (opt.dom.isMove) {
                     clearInterval(opt.dom.timer);
                     opt.callback ? opt.callback() : null;
                 }
             }


         }, 10)
     }
 }
</script>

</html>

回复收藏 0

~没有更多了~