• 升级版的全屏轮播图


    具备的功能:

    1、左右自动轮播

    2、鼠标悬停在图片上时,停止轮播,移除时,开始轮播

    3,点击导航圆点,移到响应位置图片,同时导航圆点有0.3秒的显示特效

    4、鼠标移到屏幕左右时,出现线性渐变特效,点击,会左右移到图片

     最终结果图:

    完整代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
    
            html,body{
                padding: 0;margin: 0;
                overflow: hidden;   /*做全屏滚动banner的关键*/
            }
    
            ul{
                list-style: none;
                padding: 0;margin: 0;
            }
            .bd{
                border: 2px solid red;
            }
            .cont .bg{
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
                will-change: transform;
                background-position: 0px center, 0px center;
                background-size: 100vw 100vh;
                -webkit-filter: brightness(150%);
                filter: brightness(150%);
            }
    
            .slide {
                width: 100%;
                height: 100%;
                position: relative;
                overflow: hidden;
            }
            .bg-1{
                background: url("./test-img/timg-1.jpg") center center no-repeat;
            }
            .bg-2{
                background: url("./test-img/timg-2.jpg") center center no-repeat;
            }
            .bg-3{
                background: url("./test-img/timg-3.jpg") center center no-repeat;
            }
    
            .slide-darkbg {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                z-index: 10;
            }
            .slide-darkbg:after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(11, 15, 39, 0.83);
            }
            .slide-text-wrapper {
                z-index: 15;
            }
            .slide-letter{
                top: 0px;left: 0px;
                font-size: 30vw;
                font-weight: 800;
                color: #000;
                z-index: 2;
                -webkit-text-fill-color: transparent !important;
                -webkit-background-clip: text !important;
            }
            .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;
            }
            .slide-sty{
                position: absolute;
                display: -webkit-box;   /*是老规范,要兼顾古董机子就加上它。*/
                display: -ms-flexbox;
                display: flex;            /*是新规范,老机子不支持的*/
                width: 100%; height: 100%;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                align-items: center;
            }
            .slide-text {
                font-size: 8vw;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: 12px;
                color: #fff;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .slide-text:nth-child(odd) {
                z-index: 2;
            }
            .slide-text:nth-child(even) {
                z-index: 1;
            }
    
            .nav {
                position: absolute;
                bottom: 25px;
                left: 50%;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                list-style-type: none;
                z-index: 10;
            }
            .nav-slide {
                position: relative;
                display: inline-block;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                border: 2px solid #fff;
                margin-left: 10px;
                cursor: pointer;
            }
    
            .nav-slide:hover:after {
                -webkit-transform: translate(-50%, -50%) scale(1, 1);
                transform: translate(-50%, -50%) scale(1, 1);
                opacity: 1;
            }
            .nav-slide:after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 75%;
                height: 75%;
                border-radius: 50%;
                background-color: #fff;
                opacity: 0;
                -webkit-transform: translate(-50%, -50%) scale(0, 0);
                transform: translate(-50%, -50%) scale(0, 0);
                -webkit-transition: .3s;
                transition: .3s;
            }
            .nav-slide-1 {
                margin-left: 0;
            }
    
            .nav-active:after {
                -webkit-transform: translate(-50%, -50%) scale(1, 1);
                transform: translate(-50%, -50%) scale(1, 1);
                opacity: 1;
            }
    
            .slider{
                height: 100vh;
                position: relative;
                cursor: all-scroll;
                /*-webkit-transition: -webkit-transform 750ms ease-in-out;*/
                /*transition: transform 750ms ease-in-out;*/
                display: flex;
    
                left: -100%;
            }
    
            .side-nav {
                position: absolute;
                width: 10%;
                height: 100%;
                top: 0;
                z-index: 20;
                cursor: pointer;
                opacity: 0;
                -webkit-transition: 300ms;
                transition: 300ms;
            }
            .side-nav:hover {
                opacity: .5;
            }
            .side-nav--right {
                right: 0;
                background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
                background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
            }
            .side-nav--left {
                left: 0;
                background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
                background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #eed7ff 100%);
            }
    
        </style>
    </head>
    <body>
    <div class="cont">
         <div class="slider trans-select">
    
    
    
             <div class="slide sw slide-1" data-target="1">
                 <div class="slide-darkbg bg bg-1"></div>
                 <div class="slide-sty slide-text-wrapper">
                     <div class="slide-sty slide-letter bg bg-1 trans-select"></div>
                     <div class="slide-text"></div>
                     <div class="slide-text"></div>
                     <div class="slide-text"></div>
                     <div class="slide-text"></div>
                 </div>
             </div>
             <div class="slide sw slide-2" data-target="2">
                 <div class="slide-darkbg bg bg-2"></div>
                 <div class="slide-sty slide-text-wrapper">
                     <div class="slide-sty slide-letter bg bg-2 trans-select"></div>
                     <div class="slide-text"></div>
                     <div class="slide-text"></div>
                     <div class="slide-text"></div>
                     <div class="slide-text"></div>
                 </div>
             </div>
             <div class="slide sw slide-3" data-target="3">
                 <div class="slide-darkbg bg bg-3"></div>
                 <div class="slide-sty slide-text-wrapper">
                     <div class="slide-sty slide-letter bg bg-3 trans-select"></div>
                     <div class="slide-text"></div>
                     <div class="slide-text"></div>
                     <div class="slide-text"></div>
                     <div class="slide-text"></div>
                 </div>
             </div>
         </div>
    
        <ul class="nav">
            <li class="nav-slide nav-slide-1 nav-active" data-target="1"></li>
            <li class="nav-slide " data-target="2"></li>
            <li class="nav-slide " data-target="3"></li>
        </ul>
        <div data-target='right' class="side-nav side-nav--right"></div>
        <div data-target='left' class="side-nav side-nav--left"></div>
    </div>
    </body>
    <script src="./js/jquery-1.11.3.js"></script>
    <script>
    
        $(function(){
    
            var requestAnimFrame = (function(){   //兼容性
                return window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimationFrame ||
                        window.msRequestAnimationFrame ||function( callback ){
                            window.setTimeout(callback, 1000 / 60);
                        };
            })();
            var  TIMER =null,curSlide= 1,
                 $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 toggleSlide=function(target){ $('.nav .nav-slide').removeClass('nav-active'); $('.nav li[data-target='+target+']').addClass('nav-active'); }; var slideRight=function(target){ $slider.animate({ 'left': '0' }, '750', function(){ $slider.css({'left': '-100%'}); for(var i=0;i<Math.abs(target);i++){ $slider.children('.slide.sw').last().after( $slider.children('.slide.sw').first() ); } } ); }; 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() ); } } ); }; var slideBanner=function(target){ if(target>0){ //左移 slideLeft(target); }else{ //右移 slideRight(target); } }; var run=function(target,direction){ slideBanner(direction); if(target){ //是通过点击导航圆点的 curSlide=target; }else if(direction>0){ curSlide=++curSlide<=3?curSlide:1; }else{ curSlide=--curSlide>=1?curSlide:3; } toggleSlide(curSlide); }; var autoSlide; var start=function(){ var time=new Date(),timestamp=time.getTime(); autoSlide = function(timestamp, elapsed){ if (elapsed > 2000 ) { //控制程序 2s执行一次 run(null,1); elapsed = 0; } var time=new Date(); var _timestamp=time.getTime(); TIMER = requestAnimFrame(function(_timestamp) { autoSlide(_timestamp, elapsed + _timestamp - timestamp) }); }; TIMER = requestAnimFrame( timestamp=> autoSlide(timestamp, 0)); }; $('.cont').on('click', '.nav-slide:not(.nav-active)', function () { var target =+$(this).attr('data-target'); //使用 + 将string 转换为number run(target,curSlide-target); }); $('.cont').on('click', '.side-nav', function () { var target = $(this).attr('data-target'); // console.log(typeof target,target); if (target === 'left'){ run(null,1); //向左移动 } else if (target === 'right'){ run(null,-1); //向右移动 } }); /*鼠标悬停事件*/ $('.cont').hover(function () { window.cancelAnimationFrame(TIMER); //鼠标悬停时清除定时器 }, function () { run(); start(); //鼠标移出时启动定时器 }); start(); }); </script> </html>
  • 相关阅读:
    kubernetes进阶(一) kubectl工具使用详解
    二进制安装kubernetes(七) 部署知识点总结
    1024程序员节:这就是国内开发者的现状?
    php 伪协议
    浅谈 PHP 与手机 APP 开发(API 接口开发)
    比RBAC更好的权限认证方式(Auth类认证)
    PHP获得毫秒数
    2020年PHP面试题附答案(实战经验)
    分享几套2019年各大公司最新的PHP面试题,几斤几两一试便知
    PHP面试题2019年百度工程师面试题及答案解析
  • 原文地址:https://www.cnblogs.com/web-fusheng/p/6815253.html
Copyright © 2020-2023  润新知