Question

问题是，当最后一张图像移动到第一张图片（.gallery）时，会对所有图片进行“转换”，而且不会令人愉快。目标是在开始时保持正常滑动 'http://jsfiddle.net/bfo8tase/1/' HTML

    '<section>
     <div class="img-content">
        <div class="image-container">
            <ul class="gallery">
                <li><img src="http://www.wallpapereast.com/static/images/6801687-lovely-nature-wallpaper_DHT4Wju.jpg"></li>
                <li><img src="http://www.wallpapereast.com/static/images/6801687-lovely-nature-wallpaper_DHT4Wju.jpg"></li>
                <li><img src="http://www.wallpapereast.com/static/images/6801687-lovely-nature-wallpaper_DHT4Wju.jpg"></li>  
            </ul>
        </div>
      </div> 
        <div class="arrow-left">
            <div class="arrow-img"></div>
        </div>
        <div class="arrow-right">
            <div class="arrow-img2"></div>
        </div>    
    </section>'
css

    '.arrow-left {
     position: absolute;
     background-repeat: no-repeat;
     background-size: 80px;
     top: 42%;
     opacity: 0.7;
     width: 150px;
     height: 115px;
     background-color: rgba(0, 0, 0, 0.0);
     -webkit-transition: width 1s, background-color 1s;
      /* For Safari 3.1 to 6.0 */
     transition: width 1s, background-color 1s;
     left: 0;
   }
    .arrow-right {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 80px;
    top: 42%;
    right: 0;
    opacity: 0.7;
    width: 150px;
    height: 115px;
    background-color: rgba(0, 0, 0, 0.0);
   -webkit-transition: width 1s, background-color 1s;
   /* For Safari 3.1 to 6.0 */
    transition: width 1s, background-color 1s;
    }
    .arrow-left:hover, .arrow-right:hover {
    width: 200px;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    }
    .arrow-img {
    background-image: url(../img/navs.png);
    left: 0px;
    background-position: 2px 2px;
    margin-left: 50px;
    background-repeat: no-repeat;
    background-size: 55px;
    width: 150px;
    height: 120px;
    }
   .arrow-img2 {
   position: absolute;
    right: 0px;
    background-image: url(../img/navs.png);
    background-position: 99% -107px;
    margin-right: 50px;
    background-repeat: no-repeat;
    background-size: 55px;
    width: 150px;
    height: 139px;
    }
    .image-container {
    width: 100%;
    height: 546px;
    margin: 0 auto;
    top: 49%;
    left: 38%;
    margin-right: -50%;
    transform: translate(-50%, -48%);
    position: absolute;
    }
    .image-container img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*display: none;*/
    }
    .gallery {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    }

    .gallery li:nth-child(1){
    transform: translateX(0%);
    }
    .gallery li:nth-child(2){
    transform: translateX(100%);
    }
    .gallery li:nth-child(3){
    transform: translateX(200%);
    }
    .gallery li:nth-child(4){
    transform: translateX(300%);
    }
    .image-container li
    {
    width: 100%;
    height: 100%;
    position: absolute;
    }
    .image-container li.active {
    display: block;
    }'

js

    '$(document).ready(function() {
     var intervalo;
        function createInterval() {
        intervalo = setInterval(function() {        
    currentImage++;
    if(currentImage > totalImages){
      currentImage = 0;
    }
    arrow();
    },3000);
    }

    var currentImage = 0;
    var totalImages = $('.gallery li').length - 1;

    $('.arrow-right').on('mouseup touchend', function(){
    next();
    clearInterval(intervalo);
    createInterval();
    });

    $('.arrow-left').on('mouseup touchend', function(){
    previous();
    clearInterval(intervalo);
    createInterval();
    });

    function arrow() { $('.gallery').css({
    'transform' : 'translateX(-' + currentImage * 100 + '%)',
    '-webkit-transform' : 'translateX(-' + currentImage * 100 + '%)',
    });
    }

   function next() {
    currentImage++;
    if(currentImage > totalImages)
      currentImage = 0
    arrow();
   }

   function previous() {
    currentImage--;
    if(currentImage < 0)
      currentImage = totalImages
    arrow();
   }
    createInterval();
    })'

.................. 。。。。 ................................ 。。 .................................................. ..........

Answer 1

因为您正在滑动图片，所以我不相信有简单的方式从最后一张图片滑动到第一张图片而不修改DOM。< / p>

我已经摆弄了足够的代码，以便从最后一张图像到第一张图像顺利工作（也就是说，向左滑动并重置，而不是向右滑动）：{{3} }

我能够通过复制第一张图片并将其添加到最后来正确滑动。我建议您以编程方式执行此操作，这样如果您有时间，您的HTML就不会有重复项：

<ul class="gallery">
  <li>
    <img src="http://www.wallpapereast.com/static/images/6801687-lovely-nature-wallpaper_DHT4Wju.jpg">
    <div class="artistic-sub">100 x 80 cm, Acrylic on canvas</div>
  </li>
  <!-- Three other list items removed for brevity. -->
  <li>
    <img src="http://www.wallpapereast.com/static/images/6801687-lovely-nature-wallpaper_DHT4Wju.jpg">
    <div class="artistic-sub">100 x 80 cm, Acrylic on canvas</div>
  </li>
</ul>

一旦额外元素到位，我修改了next()函数行为以滚动到最终图像（这是第一个的重复），当它到达行的末尾，然后一次＆＃ 39;完成后，我用CSS类（.reset）禁用CSS转换：

.gallery.reset {
  transition: none;
  -webkit-transition: none;
}

禁用动画后，我重置translateX属性，以便gallery元素立即滚动到第一个图像（这样，用户看不到非愉快的过渡），最后删除.reset课程，以便下次调用next()时，图库可以顺畅制作动画：

function next() {
  currentImage++;
  if(currentImage >= totalImages) {
    setTimeout(function() {
      currentImage = 0
      $('.gallery')
        .addClass('reset')
        .css({
          'transform' : 'translateX(-' + currentImage * 100 + '%)',
          '-webkit-transform' : 'translateX(-' + currentImage * 100 + '%)',
        })
      setTimeout(function() { $('.gallery').removeClass('reset'); }, 500);
    }, 500);
  }
  arrow();
}

我的JSFiddle没有考虑到两件事：

需要在previous()功能中添加类似的更改，以便顺畅地处理从第一张图片到最后一张图片的过程。
与您的clearInterval(intervalo);电话非常相似，只要用户点按下一个或上一个箭头，您就需要拨打clearTimeout()，以避免在用户点按下一个或上一个图片时重置为第一个图片箭太快了。

当滑块上的最后一张图像到达时......

1 个答案: