简单的左右滚动轮播图

Posted 2020-10-06 撒哈拉的雪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的左右滚动轮播图相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .slide {
            width: 100%;
            height: 100%;
        }
        .slider{
            width: 100%;
            height: 100%;
            position: relative;
            cursor: all-scroll;
            display: flex;
            left: -100%;
        }
        .trans-select{
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            will-change: transform;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .con{
            width: 100%;
            height: 127px;
            padding: 0;margin: 0;
            overflow: hidden;   /*做全屏滚动banner的关键*/
        }

    </style>
</head>
<body>

<div class="con">
    <div class="slider trans-select">
        <img class="slide  sw" src="images/b1.jpg" >
        <img class="slide  sw" src="images/b2.jpg" >
    </div>
</div>


<script type="text/javascript" src="js/jquery-1.11.3.js"></script>


<script>
    var  $slider = $(‘.slider‘);

    //在第一屏前添加辅助图，消除移动时的空白间隙
    var cloneNode=$(‘.slide:last‘).clone().removeClass(‘sw‘);
    $slider.children(‘.slide.sw‘).first().before(cloneNode);

    var numOfBanner=$slider.find(‘.slide‘).length;  // 轮播图个数

    $slider.css({‘width‘:100*numOfBanner+‘vw‘ });
    var slideLeft=function(target){

        $slider.animate({
                ‘left‘: ‘-200%‘
            },
            ‘750‘,
            function(){
                $slider.css({‘left‘: ‘-100%‘});
//                for(var i=0;i<Math.abs(target);i++){
                    $slider.children(‘.slide.sw‘).first().before(
                        $slider.children(‘.slide.sw‘).last()
                    );
//                }
            }
        );
    };
    setInterval(slideLeft,2000);
</script>

</body>
</html>

以上是关于简单的左右滚动轮播图的主要内容，如果未能解决你的问题，请参考以下文章

js原生选项（自动播放无缝滚动轮播图）二

用贪吃蛇小游戏的思路手写一个无限循环滚动轮播图