简单的左右滚动轮播图

 

 

<!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" alt="">
        <img class="slide  sw" src="images/b2.jpg" alt="">
    </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>

 

posted @ 2017-09-09 16:02  快乐的咸鱼  阅读(436)  评论(0)  编辑  收藏  举报