当前位置：首页 > jquery

jquery图片滚动

2026-03-02 17:55:53jquery

jQuery 图片滚动实现方法

基础水平滚动

使用jQuery的animate()方法实现水平滚动效果：

$('#scroll-left').click(function(){
  $('#image-container').animate({scrollLeft: '-=200'}, 500);
});

$('#scroll-right').click(function(){
  $('#image-container').animate({scrollLeft: '+=200'}, 500);
});

无限循环滚动

通过克隆首尾图片实现无缝循环：

jquery图片滚动

var $container = $('.scroll-container');
var $content = $container.find('.content');
$content.append($content.children().clone());

function autoScroll() {
  $container.animate({scrollLeft: '+=1'}, 20, 'linear', function(){
    if($container.scrollLeft() >= $content.width()/2){
      $container.scrollLeft(0);
    }
    autoScroll();
  });
}
autoScroll();

带缩略图导航的滚动

$('.thumbnail').click(function(){
  var index = $(this).index();
  var target = $('.main-image').eq(index).offset().left;
  $('.gallery-wrapper').animate({scrollLeft: target}, 600);
});

响应式自适应滚动

监听窗口大小变化调整滚动参数：

jquery图片滚动

$(window).resize(function(){
  var itemWidth = $('.scroll-item').outerWidth(true);
  $('.scroll-container').css('scroll-snap-type', `x mandatory`);
  $('.scroll-item').css('scroll-snap-align', 'start');
});

使用Slick插件实现

推荐使用Slick Carousel插件快速实现：

$('.your-class').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  dots: true
});

垂直滚动实现

$('#scroll-up').click(function(){
  $('.vertical-container').animate({scrollTop: '-=100'}, 300);
});

$('#scroll-down').click(function(){
  $('.vertical-container').animate({scrollTop: '+=100'}, 300);
});

触摸滑动支持

添加hammer.js实现触摸支持：

var mc = new Hammer(document.getElementById('image-slider'));
mc.on("swipeleft", function() {
  // 向右滚动逻辑
});
mc.on("swiperight", function() {
  // 向左滚动逻辑
});