国产沈阳熟女视频|骚视频97网站一区日本在线视频|久1社区在线视频|综合久久国外自产拍无码精品视频|亚洲欧美Tv先锋|综合五月天网址制服丝袜在线露脸|1024欧美手机视频我不卡|日本二区欧美亚洲国产|丁香五月婷婷五月|综合 另类 一区

284292114@qq.com 中國站
行業(yè)新聞 網(wǎng)站建設(shè) 網(wǎng)絡(luò)推廣 首頁>新聞中心>網(wǎng)站建設(shè)

推薦一個相當(dāng)好的視頻輪播效果。

時間：2025-10-12   訪問量：0

先上下載地址：https://www.jq22.com/jquery-info20585

演示地址：https://www.jq22.com/demo/jQueryPirolab201812042308/

非常棒的代碼。

但是我們在實際使用中，要美化一下。

image

那么我們貼上美化后的CSS.

1：我們?nèi)サ袅嗽瓉淼倪吙?，然后增加了未?dāng)前的幻燈時，為半透明狀態(tài)。然后當(dāng)前幻燈時，為白色進(jìn)度條。

2：他在切換的時候會縮小再放大，然后有一個背景色。不好看。我們也修改掉了。

image


@-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; /* 加上這句可消除默認(rèn)的 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%就停止了，現(xiàn)在改成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, //轉(zhuǎn)到下一個/上一個滑塊前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();
        }

        /*:::::::: 響應(yīng)式 ::::::::*/
        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>'
        );


        /*:::::::: 上傳內(nèi)容 ::::::::*/
        $(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)
            });
        };
        /*:::::::: 滑塊發(fā)動機 ::::::::*/
        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){ //數(shù)字不能為100，因為只數(shù)字無法大于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)



上一篇：后臺發(fā)布文章新增預(yù)覽功能。

下一篇：關(guān)于多行文本在后臺換行了，前端不換行的問題解決方案

服務(wù)咨詢
1對1咨詢，專業(yè)客服為您解疑答惑
聯(lián)系銷售
15899750475
在線咨詢
聯(lián)系在線客服，為您解答所有的疑問
首頁
電話
地址
留言