Question

我一直在制作我自己版本的滑块，有许多不同的迭代，并且觉得我差点就在我想要它的运作方式。

以下是滑块的演示：http://codepen.io/zephyr/pen/ZYgwNX

CODE：

HTML：

<div class="slider">
  <ul>
    <li>
      <img src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-7.jpg" alt="This is a picture of stuff in the sea" title="Sea">
    </li>
    <li>
      <img src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" alt="This is a picture of an island with a beach" title="Beach">
    </li>
    <li>
      <img src="http://hdwallpaperia.com/wp-content/uploads/2013/12/Nature-Image-Wallpapers-HD-1024x576.jpg" alt="This is a picture of a night city" title="City">
    </li>
    <li>
      <img src="http://wallpoper.com/images/00/43/54/14/sakura-cherry-blossom_00435414.jpg" alt="These are some sakura blossoms" title="Sakura Blossoms">
    </li>
    <div class="arrows left"></div>
    <div class="arrows right"></div>
  </ul>
</div>
<div class="picture-description">
  <div class="wrap">
    <div class="title"></div>
    <div class="description"></div>
  </div>
</div>

CSS：

body {margin:0;}

*,*:before,*:after {
  transition:all 0.3s;
  -webkit-transition:all 0.3s;
  box-sizing:border-box;
}

.slider,
.slider-info {
  position:relative;
  float:left;
  width:50%;
  overflow:hidden;
}

.picture-description {
  position:relative;
  float:left;
  width: 50%;
  background-color:#eee;
}

.picture-description .wrap {
  position:relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align:center;
  font-weight:300;
}

.title {
  font-size:24px;
  letter-spacing:1px;
}
.description {
  font-size:16px;
  letter-spacing:1px;
}

.slider ul {
  position:relative;
  float:left;
  width:100%;
  height:100%;
  list-style:none;
  margin:0;
  padding:0;
}

.slider ul li {
  position:absolute;
  padding:0;
  width:100%;
  transition:none;
  -webkit-transition:none;
  overflow:hidden;
}

.slider ul li img {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
  max-height: 100%;
  max-width: initial;
  width: auto;
  height: auto;
  display: inline-block;
}

@media (min-width:1200px){
  .slider,
  .slider ul li,
  .picture-description {
    min-height: 300px;
  }
}
@media (min-width:768px){
  .slider,
  .slider ul li,
  .picture-description {
    height: calc(50vh - 52.5px);
    min-height: 370px;
  }
}


@media (max-height:530px) and (min-width:768px){
  .slider,
  .slider ul li,
  .picture-description {
    height: calc(100vh - 105px);
    min-height: 400px;
  }
}

@media (max-width:768px){
  .slider,
  .picture-description {
    width:100%;
  }
  .slider,
  .slider ul li,
  .picture-description {
    height:calc(50vh - 52.5px);
    min-height:calc(50vh - 52.5px);
    max-height:calc(50vh - 52.5px);
  }
}



/**
* iPad with portrait orientation.
*/
@media all and (device-width: 768px)
and (device-height: 1024px)
and (orientation:portrait){
  .slider,
  .slider ul li,
  .picture-description {
    height: 1024px;
  }
}

/**
* iPad with landscape orientation.
*/
@media all and (device-width: 768px)
and (device-height: 1024px)
and (orientation:landscape){
  .slider,
  .slider ul li,
  .picture-description {
    height: 768px;
  }
}

/**
* iPhone 5
* You can also target devices with aspect ratio.
*/
@media screen and (device-aspect-ratio: 40/71) {
  .slider,
  .slider ul li,
  .picture-description {
    height: 500px;
  }
}


.arrows {
  position:absolute;
  height:100%;
  width:80px;
  top: 0;
  cursor:pointer;
  z-index:3;
}

.arrows.left {
  left:0;
}
.arrows.right {
  right:0;
}

.arrows.left:hover,
.arrows.left:active,
.arrows.left:focus {
  box-shadow: 40px 0 40px rgba(0,0,0,0.1) inset;
}
.arrows.right:hover,
.arrows.right:active,
.arrows.right:focus {
  box-shadow: -40px 0 40px rgba(0,0,0,0.1) inset;
}

.arrows:after {
  content:'';
  border-bottom: 4px solid #000;
  border-right: 4px solid #000;
  height: 40px;
  width: 40px;
  position: absolute;
  top: calc(50% - 20px);
}

.arrows.left:after {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  left: 20px;
}
.arrows.left:hover:after {
  border-width: 3px;
  left: 15px;
}
.arrows.left:active:after,
.arrows.left:focus:after {
  border-width: 4px;
  left: 17px;
}

.arrows.right:after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  right: 20px;
}
.arrows.right:hover:after {
  border-width: 3px;
  right: 15px;
}
.arrows.right:active:after,
.arrows.right:focus:after {
  border-width: 4px;
  right: 17px;
}

jQuery的：

$.fn.slideIt = function(desc){
  var slider = $(this);
  var slides = slider.find('li');
  slides.each(function(a,b){
    $(this).attr('data-slide',a);
    if(a == 0){
      $(this).addClass('active');
    }
    if(a > 0){
      $(this).addClass('inactive');
    }
  });

  var ua = navigator.userAgent;
  var events = (ua.match(/iPad/i)) ? 'touchstart' : 'click';
  slider.find('.arrows')
            .on(events,function(e){
    if($(this).hasClass('left')){
      slider.find('.active')
                .slideLeft(slider);
      /*slider.find('.active')
                .slideDown(slider);*/
    }
    if($(this).hasClass('right')){
      slider.find('.active')
                .slideRight(slider);
      /*slider.find('.active')
                .slideUp(slider);*/
    }
    slider.slideInfo(desc);
  });
}

$.fn.slideLeft = function(slider){
  var slide = $(this);
  slide.css({'left':'0'});
  slider.find('li:not(.active)')
            .css({'left':'-100%'});

  var next = slide.prev('li');
  if(
    parseInt(slide.attr('data-slide'))
        <=
    0
  ){
    next = slider.find('li')
                         .last();
  }

  slide.stop()
         .animate({'left':'100%'},600)
         .css({'left':'-100%'});
  next.stop()
        .animate({'left':'0'},600);

  slide.removeClass('active')
         .addClass('inactive');
  next.removeClass('inactive')
        .addClass('active');
}

$.fn.slideRight = function(slider){
  var slide = $(this);
  slider.find('li:not(.active)')
            .css({'left':'100%'});
  slide.css({'left':'0'});

  var next = slide.next('li');
  if(
    parseInt(slide.attr('data-slide')) + 1
        >= 
    slider.find('li').length
  ){
    next = slider.find('li')
                         .first();
  }

  slide.stop()
         .animate({'left':'-100%'},600)
         .css({'left':'100%'});
  next.stop()
        .animate({'left':'0'},600);

  slide.removeClass('active')
         .addClass('inactive');
  next.removeClass('inactive')
        .addClass('active');
}

$.fn.slideUp = function(slider){
  var slide = $(this);
  slider.find('li:not(.active)')
            .css({'top':'-100%'});
  slide.css({'top':'0'});

  var next = slide.next('li');
  if(
    parseInt(slide.attr('data-slide')) + 1
        >= 
    slider.find('li').length
  ){
    next = slider.find('li')
                         .first();
  }

  slide.stop()
         .animate({'top':'100%'},600)
         .css({'top':'-100%'});
  next.stop()
        .animate({'top':'0'},600);

  slide.removeClass('active')
         .addClass('inactive');
  next.removeClass('inactive')
        .addClass('active');
}

$.fn.slideDown = function(slider){
  var slide = $(this);
  slide.css({'top':'0'});
  slider.find('li:not(.active)')
            .css({'top':'100%'});

  var next = slide.prev('li');
  if(
    parseInt(slide.attr('data-slide'))
        <=
    0
  ){
    next = slider.find('li')
                         .last();
  }

  slide.stop()
         .animate({'top':'-100%'},600)
         .css({'top':'100%'});
  next.stop()
        .animate({'top':'0'},600);

  slide.removeClass('active')
         .addClass('inactive');
  next.removeClass('inactive')
        .addClass('active');
}

$.fn.slideInfo = function(el){
  var alt = $(this).find('.active img')
                                 .attr('alt');
  var title = $(this).find('.active img')
                                     .attr('title');
  $(el).find('.title')
         .text(title);
  $(el).find('.description')
         .text(alt);
}

$(document).ready(function(){
  $('.slider').slideIt('.picture-description');
  $('.slider').slideInfo('.picture-description');
});

出于某种原因，元素在每次转换之前闪烁一毫秒，并且在切换标签等时，它不会立即执行操作（即它会变为空白一秒钟然后切换到下一张幻灯片）。

我不确定为什么会发生这种情况，并希望对此有任何帮助！

Answer 1

问题似乎是使用jquery css和动画的组合。将其全部更改为动画，例如：

  slide.stop()
         .animate({left:'100%'},600,
                function(){
                                slide.animate({left:'-100%'},0);
                            });
  next.stop()
        .animate({'left':'0'},600);

而不是

  slide.stop()
         .animate({'left':'100%'},600)
         .css({'left':'-100%'});
  next.stop()
        .animate({'left':'0'},600);

在滑动之前元素会短暂闪烁，从而干扰滑块的平滑度

1 个答案: