zoukankan      html  css  js  c++  java
  • 简单的左右滚动轮播图

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            .slide {
                 100%;
                height: 100%;
            }
            .slider{
                 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{
                 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>
  • 相关阅读:
    PHP命令行执行程序php.exe使用及常用参数
    如何搜百度云盘里别人分享的文件
    WIN8下笔记本共享热点的设置
    COMPANY_点取消会卡死的解决方法
    python urllib
    windows技术
    五分钟搞定Linux容器
    分分钟教你制作完美的虚拟机镜像
    事件日志监控工具推荐
    Linux服务器管理员必备Linux命令TOP5
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/7498493.html
Copyright © 2011-2022 走看看