升级版的全屏轮播图

时间：2017-05-06 00:57:31 阅读：251 评论：0 收藏：0 [点我收藏+]
标签：order jpg add pack tran new otto lte image
具备的功能：
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>
升级版的全屏轮播图
标签：order jpg add pack tran new otto lte image
原文地址：http://www.cnblogs.com/web-fusheng/p/6815253.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行