首页 > 代码库 > 升级版的全屏轮播图

升级版的全屏轮播图

 

具备的功能:

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>

 

升级版的全屏轮播图