首页 > 代码库 > 升级版的全屏轮播图
升级版的全屏轮播图
具备的功能：
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>
升级版的全屏轮播图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。