先上下载地址:https://www.jq22.com/jquery-info20585
演示地址:https://www.jq22.com/demo/jQueryPirolab201812042308/
非常棒的代码。
但是我们在实际使用中,要美化一下。
那么我们贴上美化后的CSS.
1:我们去掉了原来的边框,然后增加了未当前的幻灯时,为半透明状态。然后当前幻灯时,为白色进度条。
2:他在切换的时候会缩小再放大,然后有一个背景色。不好看。我们也修改掉了。
@-webkit-keyframes ball-scale-multiple { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 5% { opacity: 1; } 100% { transform: scale(1.2) rotate(90deg); opacity: 0; } } @keyframes ball-scale-multiple { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 5% { opacity: 1; } 100% { transform: scale(1.2) rotate(90deg); opacity: 0; } } .loaderWrap { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 123333333; } .ball-scale-multiple { position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%); } .video{ width: 100%; height: 100%; object-fit: cover; display: block; /* 加上这句可消除默认的 inline 间隙 */ } .ball-scale-multiple > div { border-radius: 0; animation-fill-mode: both; position: absolute; left: -60px; top: -60px; opacity: 0; margin: 0; width: 120px; height: 120px; animation: ball-scale-multiple 1s 0s linear infinite; } .ball-scale-multiple > div:nth-child(1) { animation-delay: -1s; } .ball-scale-multiple > div:nth-child(2) { animation-delay: -0.8s; } .ball-scale-multiple > div:nth-child(3) { animation-delay: -0.6s; } .ball-scale-multiple > div:nth-child(4) { animation-delay: -0.4s; } .ball-scale-multiple > div:nth-child(5) { animation-delay: -0.2s; } .a-container { width: 1170px; margin: 20px auto; } .a-1_2 { width: 48%; display: inline-block; margin: 0 1%; } .o-sliderContainer { overflow: hidden; position: relative; width: 100%; min-height: 200px; float: left; margin: 30px 0; height: auto; } .o-sliderContainer.hasShadow { box-shadow: 0 39px 22px -29px rgba(0, 0, 0, 0.2); } .o-sliderContainer:hover .o-slider-next { right: 20px; } .o-sliderContainer:hover .o-slider-prev { left: 20px; } .o-slider--item { height: auto; width: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; float: left; transition: all 0.2s cubic-bezier(0.7, 0.18, 0.53, 0.75); opacity: 1; transform-origin: center center; z-index: 99; overflow: hidden; } .o-slider--item::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; height: 100%; } .o-slider--item.isActive { opacity: 1; background: none; } .o-slider--item.isMoving { opacity: 1; z-index: 100; } .o-slider { width: auto; position: relative; display: none; } .o-slider.isVisible { display: table; } .o-slider.isDraggable { cursor: move; } .o-slider-textWrap { left: 2%; bottom: 45px; height: auto; position: absolute; text-align: left; padding:0; width: 100%; transition: all 0.4s; opacity: 1; overflow: visible; perspective: 1000px; z-index: 2; } .isActive .o-slider-textWrap::after { width: 100%; left: 0; } .isActive .o-slider-paragraph { opacity: 1; transform: perspective(0) rotateY(0) translate(0, 0); transform-origin: 0 0; transition-delay: 1s; } .isActive .o-slider-title { opacity: 1; transform: perspective(0) rotateY(0) translate(0, 0); transform-origin: 0 0; transition-delay: 0.2s; } .isActive .o-slider-subTitle { opacity: 1; transform: perspective(0) rotateY(0) translate(0, 0); transform-origin: 0 0; transition-delay: 0.6s; } .o-slider-title { width: auto; margin: 0 0 5px 0; height: auto; color: #fff; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); font-size: 1.4rem; display: inline-block; padding: 0; transition: all 0.4s; transform-origin: 0 0; transform: perspective(1000px) rotateY(120deg) translate(100px, -100px); opacity: 0; position: relative; z-index: 1; } .o-slider-subTitle { width: auto; margin: 0 0 5px 0; height: auto; color: #fff; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); font-size: 1.4rem; display: inline-block; padding: 0; transition: all 0.4s; transform-origin: 0 0; transform: perspective(1000px) rotateY(120deg) translate(100px, -100px); opacity: 0; position: relative; z-index: 1; font-size: 1.2rem; } .o-slider-paragraph { width: auto; margin: 0 0 5px 0; height: auto; color: #fff; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); font-size: 1.4rem; display: inline-block; padding: 0; transition: all 0.4s; transform-origin: 0 0; transform: perspective(1000px) rotateY(120deg) translate(100px, -100px); opacity: 0; position: relative; z-index: 1; font-size: 0.8rem; max-width: 100%; display: none; } @media screen and (min-width: 768px) { .o-slider-textWrap { left: 5%; width: 90%; } .o-slider-title { font-size: 1.8rem; } .o-slider-subTitle { font-size: 1.4rem; } .o-slider-paragraph { max-width: 60%; font-size: 1rem; display: block; } } @media screen and (min-width: 1024px) { .o-slider-pagination { bottom: 6%; } .o-slider-textWrap { left: 0px; width: 100%; top:calc(50% - 180px); } .o-slider-title { font-size: 2rem; } .o-slider-subTitle { font-size: 1.6rem; } .o-slider-paragraph { max-width: 40%; font-size: 1.2rem; } } .a-divider { display: block; width: 100%; height: 1px; margin: 2px 0; } .o-slider-controls { display: none; } .o-slider-controls.isVisible { display: block; } .o-slider-pagination { bottom: 2%; left: 0; position: absolute; text-align: center; width: 100%; z-index: 1444000; margin: 0; padding: 0; } .o-slider-pagination > li { border-radius:5px; overflow: hidden; border:none; display: inline-block; position: relative; top: 0; right: 0; bottom: 0; left: 0; height: 5px; width: 150px; margin-left: 10px; margin-right:10px; transition: all 250ms; cursor: pointer; background-clip: padding-box; z-index: 100; background: rgba(255,255,255,0.5); } .nobg .jinDU{ display: none!important; } .isActive .jinDU{ display:block!important; } .o-slider--preview { position: absolute; top: -70px; right: auto; bottom: auto; left: -65px; opacity: 0; width: 140px; height: 60px; background-size: cover; background-position: center center; transition: all 250ms; z-index: -1; border: 3px solid #000; transform: scale(0.2, 0.2); transform-origin: center bottom; display: none; } .o-slider--preview::before { content: ""; position: absolute; top: auto; right: auto; bottom: -13px; left: 50%; margin: 0 0 0 -5px; height: 0; width: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #000; } .o-slider--preview.isActive, .o-slider-pagination li:hover .o-slider--preview { opacity: 1; position: absolute; top: -76px; right: auto; bottom: auto; left: -65px; transform: scale(1, 1); } @media screen and (min-width: 768px) { .o-slider--preview { display: block; } } .o-slider-arrows { margin: 0; list-style: none; display: block; } .o-slider-next, .o-slider-prev { border-radius: 50%; background: rgba(255,255,255,0.4); position: absolute; left: 20px; top: 45%; margin-top: -35px; width: 50px; height: 50px; z-index: 999; opacity: 1; } .o-slider-next i, .o-slider-prev i { position: absolute; top: 50%; left: 0; margin: -12px 0 0; text-align: center; width: 100%; font-size: 1.8rem; color: #fff; } .o-slider-next { left: auto; right: 20px; } .isDisabled { opacity: 0.1; cursor: auto; } @media screen and (max-width: 1280px) { .a-container { width: 970px; } } @media screen and (max-width: 1024px) { .o-slider-arrows { display: none; } .o-sliderContainer { height: 450px; width: 100%; margin: 0 0 50px 0; } .o-slider--item { height: 450px; } } @media screen and (max-width: 768px) { .a-container { width: 90%; margin: 20px auto; } .a-1_2 { width: 100%; display: block; margin: 0; } .o-slider-arrows { display: none; } .o-sliderContainer { height: 350px; } .o-slider--item { height: 350px; } .o-slider-panel img { left: -15%; width: 130%; } } @media screen and (max-width: 480px) { .o-slider--item { height: 270px; } .o-slider--item img { left: -20%; width: 140%; } .o-sliderContainer { height: 270px; } }
同时还需要修改一下JS。修改了哪些地方,可自行和原代码作对比,最后面的PADDING高度去掉。原来因为有BORDER,所以到98%就停止了,现在改成99之后就可以读到100%
(function($) { "use strict"; $.fn.pbTouchSlider = function(options) { var slider_Opts = $.extend({ slider_Wrap : '', //为div.o-sliderContainer分配一个唯一的ID slider_Item : '.o-slider--item', //单个项目 slider_Drag : true, //你的选择。.拖还是不拖。这就是问题所在。.. auto:false, autoTime:6000, slider_Dots : { //想不想看到点? class :'.o-slider-pagination', enabled : true, preview : true }, slider_Arrows : { //想不想看箭? class :'.o-slider-arrows', enabled : true }, slider_Threshold : 25, //转到下一个/上一个滑块前dragX的百分比 slider_Speed : 1000, slider_Ease : 'cubic-bezier(0.5, 0, 0.5, 1)', }, options); /*:::::::: LOADER ::::::::*/ var loaderHtml = '<div class="loaderWrap">'+ '<div class="ball-scale-multiple">'+ '<div></div>'+ '<div></div>'+ '<div></div>'+ '<div></div>'+ '</div></div>'; $(slider_Opts.slider_Wrap).each( function(){$(this).append(loaderHtml);}); function loader(visibility) { var thisLoader = $(slider_Opts.slider_Wrap +' .loaderWrap'); if (visibility === true) $(thisLoader).show(); else $(thisLoader).hide(); } /*:::::::: 响应式 ::::::::*/ function setResponsive() { var VW = document.documentElement.clientWidth; if (VW >= slider_Opts.slider_Breakpoints.tablet.media) { $(pbSlider.slider_Wrap + '.o-sliderContainer,'+ pbSlider.slider_Wrap + ' ' + pbSlider.slider_Item).css({height: slider_Opts.slider_Breakpoints.default.height}); } else if (VW >= slider_Opts.slider_Breakpoints.smartphone.media) { $(pbSlider.slider_Wrap + '.o-sliderContainer,'+ pbSlider.slider_Wrap + ' ' + pbSlider.slider_Item).css({height: slider_Opts.slider_Breakpoints.tablet.height}); } else { $(pbSlider.slider_Wrap + '.o-sliderContainer,'+ pbSlider.slider_Wrap + ' ' + pbSlider.slider_Item).css({height: slider_Opts.slider_Breakpoints.smartphone.height}); } } $(window).resize(function() {setResponsive();}); /*对象滑块*/ var pbSlider = {}; pbSlider.slider_Wrap = slider_Opts.slider_Wrap; pbSlider.slider_Item = slider_Opts.slider_Item; pbSlider.slider_Dots = slider_Opts.slider_Dots; pbSlider.slider_Threshold = slider_Opts.slider_Threshold; pbSlider.slider_Active = 0; pbSlider.slider_A=0; pbSlider.slider_B=0; pbSlider.slider_Count = 0; pbSlider.slider_NavWrap = '<div class="o-slider-controls"></div>'; pbSlider.slider_NavPagination ='<ul class="o-slider-pagination" id="chang"></ul>'; pbSlider.slider_NavArrows ='<ul class="o-slider-arrows"><li class="o-slider-prev"><i class="fa fa-chevron-left"></i></li><li class="o-slider-next"><i class="fa fa-chevron-right"></i></li></ul>'; /*附加动画*/ // $('head').append( // '<style>' + pbSlider.slider_Wrap + ' .o-slider.isAnimate{' + // '-webkit-transition: all ' + slider_Opts.slider_Speed + 'ms ' + slider_Opts.slider_Ease + ';' + // 'transition: all ' + slider_Opts.slider_Speed + 'ms ' + slider_Opts.slider_Ease + ';' + // '</style>' // ); $('head').append( '<style>' + pbSlider.slider_Wrap + ' .o-slider.isAnimate{' + '-webkit-transition: none;' + 'transition: none;' + '</style>' ); /*:::::::: 上传内容 ::::::::*/ $(window).on('load', function() { $(pbSlider.slider_Item).each(function(){ var bg = $(this).attr('data-image'); //$(this).css({'background-image':'url('+bg+')'}); }); setTimeout ( function(){ loader(false); },1000); $(pbSlider.slider_Wrap + ' .o-slider-controls').addClass('isVisible'); $(pbSlider.slider_Draggable).addClass('isVisible'); setResponsive(); }); /*::::::::初始化 ::::::::*/ pbSlider.pbInit = function(selector) { pbSlider.slider_Draggable = selector; pbSlider.slider_Count = $(pbSlider.slider_Wrap).find(pbSlider.slider_Item).length; $(selector).css('width', pbSlider.slider_Count * 100 + '%'); $(pbSlider.slider_Item).css({'width': 100 / pbSlider.slider_Count+ '%'}); var incrSlides = 0; $(pbSlider.slider_Wrap).find(pbSlider.slider_Item).each(function() { $(this).attr('data-id', 'slide-' + (incrSlides++)); }); if(slider_Opts.slider_Arrows.enabled === true || slider_Opts.slider_Dots.enabled === true ){ $(pbSlider.slider_Wrap).append(pbSlider.slider_NavWrap); } if(slider_Opts.slider_Arrows.enabled === true){$(pbSlider.slider_Wrap).append(pbSlider.slider_NavArrows);} if(slider_Opts.slider_Dots.enabled === true){ var incrPagination = 0; $(pbSlider.slider_Wrap).append(pbSlider.slider_NavPagination); for (incrPagination; incrPagination < pbSlider.slider_Count; incrPagination++) { var activeStatus = incrPagination === pbSlider.slider_Active ? ' class="isActive"' : ''; var div='<div class="jinDU" style="background:#fff; height: 100%; width: 0%; border-radius:5px;"></div>' var gotoSlide = 'data-increase="' + [incrPagination] + '"'; var background = $(pbSlider.slider_Wrap).find("[data-id='slide-" + incrPagination + "']").attr('data-image'); //background = background.replace('url(','').replace(')','').replace(/\"/gi, ""); if(slider_Opts.slider_Dots.preview === true){ $(pbSlider.slider_Wrap).find(pbSlider.slider_Dots.class) .append( '<li ' + activeStatus + ' ' + gotoSlide + '> '+ '<span class="o-slider--preview" style=""></span>'+ '</li>'); } else { $(pbSlider.slider_Wrap).find(pbSlider.slider_Dots.class) .append('<li ' + activeStatus + ' ' + gotoSlide + '>'+div+'</li>'); } } } setTimeout(function() { $(pbSlider.slider_Item + '[data-id=slide-' + pbSlider.slider_Active + ']').addClass('isActive'); },400); /*:::::::: HAMMER => see http://hammerjs.github.io/ ::::::::*/ if(slider_Opts.slider_Drag === true){ $(pbSlider.slider_Draggable).addClass('isDraggable'); var stuff4hammer = document.querySelector(pbSlider.slider_Wrap); var hammerOpts = { dragLockToAxis: true, dragBlockHorizontal: true, touchAction: 'pan-x', cssProps: {userSelect: true} } var hammertime = new Hammer(stuff4hammer, hammerOpts); hammertime.on('pan', function(e) { e.preventDefault(); var percentage = 100 / pbSlider.slider_Count * e.deltaX / window.innerWidth; var percentageCalc = percentage - 100 / pbSlider.slider_Count * pbSlider.slider_Active; var notDraggable = $(e.target).find('.slider-textWrap').length; if(pbSlider.slider_Active != pbSlider.slider_Count-1 && pbSlider.slider_Active != 0){ $(pbSlider.slider_Wrap).find(pbSlider.slider_Item).addClass('isMoving'); } // $(pbSlider.slider_Draggable).css({ // 'perspective': '1000px', // 'backface-visibility': 'hidden', // 'transform': 'translateX( ' + percentageCalc + '% )' // }); if (e.isFinal) { if (e.velocityX > 1) { pbSlider.pbGoslide(pbSlider.slider_Active - 1); } else if (e.velocityX < -1) { pbSlider.pbGoslide(pbSlider.slider_Active + 1); } else { if (percentage <= -(pbSlider.slider_Threshold / pbSlider.slider_Count)) { pbSlider.pbGoslide(pbSlider.slider_Active + 1); } else if (percentage >= (pbSlider.slider_Threshold / pbSlider.slider_Count)) { pbSlider.pbGoslide(pbSlider.slider_Active - 1); } else { pbSlider.pbGoslide(pbSlider.slider_Active); } } } }); } $(pbSlider.slider_Wrap + ' .o-slider-pagination li').on('click', function() { var this_data = $(this).attr('data-increase'); if(!$(this).hasClass('isActive')){ pbSlider.pbGoslide(this_data); } //console.log( pbSlider.slider_Active) //console.log(this_data + ' / ' + pbSlider.slider_Active ); }); $(pbSlider.slider_Wrap + ' .o-slider-prev').addClass('isDisabled'); $(pbSlider.slider_Wrap + ' .o-slider-arrows li').on('click', function() { if ($(this).hasClass('o-slider-next')) { pbSlider.pbGoslide(pbSlider.slider_Active + 1); } else { pbSlider.pbGoslide(pbSlider.slider_Active - 1); } console.log( pbSlider.slider_Active) }); }; /*:::::::: 滑块发动机 ::::::::*/ pbSlider.pbGoslide = function(number) { $(pbSlider.slider_Wrap + ' .o-slider-arrows li').removeClass('isDisabled'); if (number < 0) { pbSlider.slider_Active = 0; } else if (number > pbSlider.slider_Count - 1) { pbSlider.slider_Active = pbSlider.slider_Count - 1; } else { pbSlider.slider_Active = number; } if (pbSlider.slider_Active >= pbSlider.slider_Count - 1) { var firstS = $(pbSlider.slider_Wrap).find(pbSlider.slider_Item).first(); $(pbSlider.slider_Wrap + ' .o-slider-next').addClass('isDisabled'); } else if (pbSlider.slider_Active <= 0) { $(pbSlider.slider_Wrap + ' .o-slider-prev').addClass('isDisabled'); } else { $(pbSlider.slider_Wrap + ' .o-slider-arrows li').removeClass('isDisabled'); } if(pbSlider.slider_Active != pbSlider.slider_Count-1 && pbSlider.slider_Active != 0){ $(pbSlider.slider_Wrap).find(pbSlider.slider_Item).addClass('isMoving'); } $(pbSlider.slider_Draggable).addClass('isAnimate'); var percentage = -(100 / pbSlider.slider_Count) * pbSlider.slider_Active; $(pbSlider.slider_Draggable).css({ 'perspective': '1000px', 'backface-visibility': 'hidden', 'transform': 'translateX( ' + percentage + '% )' }); clearTimeout(pbSlider.timer); pbSlider.timer = setTimeout(function() { $(pbSlider.slider_Wrap).find(pbSlider.slider_Draggable).removeClass('isAnimate'); $(pbSlider.slider_Wrap).find(pbSlider.slider_Item).removeClass('isActive').removeClass('isMoving'); $(pbSlider.slider_Wrap).find(pbSlider.slider_Item + '[data-id=slide-' + pbSlider.slider_Active + ']').addClass('isActive'); $(pbSlider.slider_Wrap + ' .o-slider--item img').css('transform', 'translateX(0px )'); }, slider_Opts.slider_Speed); if(slider_Opts.slider_Dots.enabled === true){ var sliderDots = $(pbSlider.slider_Wrap).find(pbSlider.slider_Dots.class + ' > *'); var increase = 0; for (increase; increase < sliderDots.length; increase++) { var className = increase == pbSlider.slider_Active ? 'isActive' : 'nobg'; $(pbSlider.slider_Wrap).find(sliderDots[increase]).removeClass('isActive').addClass(className); $(pbSlider.slider_Wrap).find(sliderDots[increase]).children().removeClass('isActive').addClass(className); } setTimeout(function() { $(pbSlider.slider_Wrap).find(sliderDots).children().removeClass('isActive'); },500); } pbSlider.slider_Active = Number(pbSlider.slider_Active); }; pbSlider.auto = function() { pbSlider.autoTimer = setInterval(function(){ if($('#pbSlider0').children().eq(pbSlider.slider_Active).children()[0].tagName=='VIDEO'){ if(pbSlider.slider_B==0){ $('.o-slider-pagination').children().eq(pbSlider.slider_Active).children().css({'width':'0%'}) } pbSlider.slider_B=pbSlider.slider_B+1 var currentTime=$('#pbSlider0').children().eq(pbSlider.slider_Active).children()[0].currentTime var duration=$('#pbSlider0').children().eq(pbSlider.slider_Active).children()[0].duration var a=currentTime/duration; var b=(a*100).toFixed(0)+"%"; $('.o-slider-pagination').children().eq(pbSlider.slider_Active).children().css({'width':b}) //$('.o-slider-pagination').children().siblings()[0].css({'width':'0%'}) //console.log($('.o-slider-pagination').html()) } else{ pbSlider.slider_A=pbSlider.slider_A+1 $('.o-slider-pagination').children().eq(pbSlider.slider_Active).children().css({'width':'100%'}) } if(parseInt(b)>99){ //数字不能为100,因为只数字无法大于100%,只能大于99% if (pbSlider.slider_Active >= pbSlider.slider_Count - 1) { pbSlider.pbGoslide(0); pbSlider.slider_B=0 } else { $(pbSlider.slider_Wrap + ' .o-slider-next').trigger('click'); pbSlider.slider_B=0 } } if(pbSlider.slider_A>=(slider_Opts.autoTime/10)){ if (pbSlider.slider_Active >= pbSlider.slider_Count - 1) { pbSlider.pbGoslide(0); pbSlider.slider_A=0; } else { $(pbSlider.slider_Wrap + ' .o-slider-next').trigger('click'); pbSlider.slider_A=0; } } //document.getElementById('hyTime').style.width=b; },10); } if(slider_Opts.auto===true){ pbSlider.auto(); } pbSlider.pbInit(this); }; }(jQuery)); // setTimeout(function(){ // $('#pbSliderWrap0').after('<div style="padding-top:'+$('#pbSliderWrap0').height()+'px">') // },300)
上一篇:后台发布文章新增预览功能。
下一篇:没有了!