Question

这是我的JsFiddle

如何在几秒钟之后将滚动条自动向右移动（在第三张图像之后）并具有一些淡入淡出效果，以便用户可以看到下一组图像。

有人可以告诉我如何使用javascript和jquery来完成。

这是我的Html

<div class="gallery">
<div class="row">
<img class="normalimage" src="">
<!-- more images -->
</div>
<div class="row">
<img class="normalimage" src="">
<!-- more images -->
</div>
</div>

这是我的css：

.gallery .row {
white-space: nowrap;
}
.gallery img {
display: inline-block;
/* other properties */
}

Answer 1

这是一个简化的jQuery版本：

$(document).ready(function() {
  setInterval(function() {
    var A = $('.gallery').scrollLeft();
    if (A < 993) {
      $('.gallery').animate({
        scrollLeft: '+=331px'
      }, 300);
    }
    if (A >= 993) {
      $('.gallery').delay(400).animate({
        scrollLeft: 0
      }, 300);
    }
  }, 3000);
});

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

要在幻灯片之间添加简单的淡入淡出过渡，请添加：

$('.gallery').scroll(function() {
    var A = $('.gallery').scrollLeft();
    if (A === 0 || A === 331 || A === 662 || A === 993) {
      $('.gallery img').animate({
        opacity: 1
      }, 300);
    } else {
      $('.gallery img').css({
        opacity: 0
      });
    }
});

$(document).ready(function() {
  setInterval(function() {
    var A = $('.gallery').scrollLeft();
    if (A < 993) {
      $('.gallery').animate({
        scrollLeft: '+=331px'
      }, 300);
    }
    if (A >= 993) {
      $('.gallery').delay(400).animate({
        scrollLeft: 0
      }, 300);
    }
  }, 3000);
  $('.gallery').scroll(function() {
    var A = $('.gallery').scrollLeft();
    if (A === 0 || A === 331 || A === 662 || A === 993) {
      $('.gallery img').animate({
        opacity: 1
      }, 300);
    } else {
      $('.gallery img').css({
        opacity: 0
      });
    }
  });
});

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

和纯CSS版本：

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
  animation: scroll 8s infinite;
}
@keyframes scroll {
  0% {
    opacity: 0;
  }
  6.25% {
    transform: translatex(0px);
    opacity: 1;
  }
  12.5% {
    transform: translatex(0px);
    opacity: 1;
  }
  18.75% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  31.25% {
    transform: translatex(-331px);
    opacity: 1;
  }
  37.5% {
    transform: translatex(-331px);
    opacity: 1;
  }
  43.75% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  56.25% {
    transform: translatex(-662px);
    opacity: 1;
  }
  62.5% {
    transform: translatex(-662px);
    opacity: 1;
  }
  68.75% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  81.25% {
    transform: translatex(-993px);
    opacity: 1;
  }
  87.5% {
    transform: translatex(-993px);
    opacity: 1;
  }
  93.75% {
    transform: translatex(-1324px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.gallery:hover img {
  animation: none;
}
.gallery:hover {
  overflow-x: scroll;
}

<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

Answer 2

在性能方面，移动滚动条不会给您带来最佳效果。

然而，要回答你的问题：

var Slider = {
    incr: 3, //everytime go to 3rd image from current
    imageNumber: 0, //this keeps track of index of image to go to
    intervalDuration: 3000, //interval between each scroll
    imageMargin: 20, //margin that you set between images
    nextImage: null, //next image object, keeps updating,
    updateNextImage: function(){
            $(Slider.nextImage).removeClass('next');
            Slider.imageNumber += Slider.incr;
            $('.row:first img:nth-child(' + Slider.imageNumber + ')').addClass('next');
            Slider.nextImage = $('img.next');
    }
}

$(document).ready(function(){
    //set next item first
    Slider.updateNextImage();

    setInterval(function(){
        try{
            $('.gallery').animate(
                { scrollLeft: $(Slider.nextImage).position().left + $('.gallery').scrollLeft() + $(Slider.nextImage).outerWidth() + Slider.imageMargin }, //Scrolls to the element
                300, function(){
                    //update next item
                    Slider.updateNextImage();
            });
        } catch(e){
        //code to restart slider
            Slider.imageNumber = 0;
            $('.gallery').animate({scrollLeft: 0});
            Slider.updateNextImage();
        }

    }, Slider.intervalDuration);

});

为了获得更多控制，更清晰的编码和许多其他形式的滑块，我建议使用现有的jQuery插件来实现此目的：http://www.woothemes.com/flexslider/

一切顺利。

Answer 3

我真的不明白你的意思：

“有一些淡入效果”

但是这里有一个“滑块”，一次跳过3个班级：

var left = $('.normalimage:nth-child(3)').offset().left-$('.gallery').offset().left;
var max = $('.gallery').width();
var step = left;
setInterval( function(){
    $('.gallery').animate({
        scrollLeft:step,
    } ,300);
    if(max>= step)
        step += left;
    else
        step = 0;
}, 2000 );

Demo here

Answer 4

Working jsFiddle Demo

$(function () {
    // show 3 elements in each row
    var count = 3;

    function showItems(start) {
        if (start >= $('.gallery .row:eq(0) img').length) {
            start = 0;
        }

        // for debug
        console.log('Showing items ' + start + ' - ' + (start + count));

        $('.gallery .row img').css('display', 'none');
        $('.gallery .row').each(function () {
            var $row = $(this);
            for (var i = start; i < count + start; i++) {
                $row.find('img').eq(i)
                    .css('opacity', 0)
                    .css('display', 'inline-block')
                    .animate({opacity: 1});
            }
        });

        setTimeout(function () {
            showItems(count + start);
        }, 1000);
    }

    showItems(0);
});

Jquery-在特定时间后自动将滚动条移动到特定位置

4 个答案: