简单的左右滚动轮播图

最新推荐文章于 2022-08-28 14:16:57 发布

叛逆的鲁鲁修love CC

最新推荐文章于 2022-08-28 14:16:57 发布

阅读量191

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/web-fusheng/p/7498493.html

版权

<!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>

转载于:https://www.cnblogs.com/web-fusheng/p/7498493.html

叛逆的鲁鲁修love CC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的左右滚动轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .slide { width: 1...
复制链接

扫一扫