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>
  • 相关阅读:
    mysql整理-常用sql语句
    WAMP中的mysql设置密码
    cmd中输入net start mysql 提示:服务名无效或者MySQL正在启动 MySQL无法启动
    “laravel.log” could not be opened: failed to open stream
    RESTful API 设计指南
    理解RESTful架构
    PHP:API 接口规范完整版本
    php的api接口
    laravel5.5部署
    《面向对象程序设计》课程作业二
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/7498493.html
Copyright © 2011-2022 走看看