jquery无缝轮播

jQuery无缝轮播实现方法

基本HTML结构

<div class="slider">
  <ul class="slider-list">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
</div>

CSS样式设置

.slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.slider-list {
  width: 3000px;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slider-list li {
  float: left;
  width: 600px;
  height: 400px;
}

jQuery核心代码

$(function() {
  var $slider = $('.slider');
  var $list = $('.slider-list');
  var $items = $list.children();
  var itemWidth = $items.width();
  var currentIndex = 0;
  var timer = null;

  // 克隆第一个元素并添加到末尾实现无缝效果
  $list.append($items.first().clone());

  // 自动轮播函数
  function autoPlay() {
    timer = setInterval(function() {
      currentIndex++;
      $list.animate({left: -currentIndex * itemWidth}, 500, function() {
        if(currentIndex >= $items.length) {
          currentIndex = 0;
          $list.css('left', 0);
        }
      });
    }, 3000);
  }

  // 暂停轮播
  function stopPlay() {
    clearInterval(timer);
  }

  // 初始化轮播
  autoPlay();

  // 鼠标悬停暂停
  $slider.hover(stopPlay, autoPlay);
});

增强功能实现

添加指示器

<div class="slider-indicator">
  <span class="active"></span>
  <span></span>
  <span></span>
</div>

更新jQuery代码

// 更新指示器状态
function updateIndicator(index) {
  $('.slider-indicator span')
    .removeClass('active')
    .eq(index % $items.length)
    .addClass('active');
}

// 修改autoPlay函数
function autoPlay() {
  timer = setInterval(function() {
    currentIndex++;
    $list.animate({left: -currentIndex * itemWidth}, 500, function() {
      if(currentIndex >= $items.length) {
        currentIndex = 0;
        $list.css('left', 0);
      }
      updateIndicator(currentIndex);
    });
  }, 3000);
}

响应式处理

// 窗口大小改变时重置轮播
$(window).resize(function() {
  itemWidth = $slider.width();
  $items.width(itemWidth);
  $list.css('left', -currentIndex * itemWidth);
});

注意事项

• 确保在DOM加载完成后执行jQuery代码
• 图片需要预加载避免空白出现
• 考虑添加触摸事件支持移动端
• 过渡效果可以使用CSS3 transition替代jQuery animate获得更好性能

通过以上方法可以实现一个基础的无缝轮播效果，可根据实际需求添加更多功能如导航按钮、淡入淡出效果等。