当前位置：首页 > jquery

jquery轮播代码

2026-03-02 18:28:38jquery

jQuery轮播代码实现

轮播效果是网页中常见的交互组件，可以通过jQuery快速实现。以下是几种常见的轮播实现方式：

基础自动轮播

$(document).ready(function(){
  var currentIndex = 0;
  var items = $('.slider-item');
  var itemAmt = items.length;

  function cycleItems() {
    var item = $('.slider-item').eq(currentIndex);
    items.hide();
    item.css('display','inline-block');
  }

  var autoSlide = setInterval(function() {
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
      currentIndex = 0;
    }
    cycleItems();
  }, 3000);

  $('.next').click(function() {
    clearInterval(autoSlide);
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
      currentIndex = 0;
    }
    cycleItems();
  });

  $('.prev').click(function() {
    clearInterval(autoSlide);
    currentIndex -= 1;
    if (currentIndex < 0) {
      currentIndex = itemAmt - 1;
    }
    cycleItems();
  });
});

带淡入淡出效果的轮播

$(function() {
  var slideCount = $('#slider ul li').length;
  var slideWidth = $('#slider ul li').width();
  var slideHeight = $('#slider ul li').height();
  var sliderUlWidth = slideCount * slideWidth;

  $('#slider').css({ width: slideWidth, height: slideHeight });
  $('#slider ul').css({ width: sliderUlWidth, marginLeft: -slideWidth });
  $('#slider ul li:last-child').prependTo('#slider ul');

  function moveLeft() {
    $('#slider ul').animate({
      left: +slideWidth
    }, 200, function() {
      $('#slider ul li:last-child').prependTo('#slider ul');
      $('#slider ul').css('left', '');
    });
  };

  function moveRight() {
    $('#slider ul').animate({
      left: -slideWidth
    }, 200, function() {
      $('#slider ul li:first-child').appendTo('#slider ul');
      $('#slider ul').css('left', '');
    });
  };

  $('a.control_prev').click(function() {
    moveLeft();
  });

  $('a.control_next').click(function() {
    moveRight();
  });
});

响应式轮播实现

$(window).on('load resize', function() {
  var windowWidth = $(window).width();
  var sliderWidth = windowWidth < 768 ? windowWidth : 768;

  $('.slider-container').css({
    'width': sliderWidth,
    'margin': '0 auto'
  });

  var slideWidth = $('.slider-container').width();
  var slideCount = $('.slider-slide').length;
  var totalWidth = slideCount * slideWidth;

  $('.slider-track').css('width', totalWidth);
  $('.slider-slide').css('width', slideWidth);
});

var currentSlide = 0;
var slideCount = $('.slider-slide').length;

function goToSlide(n) {
  $('.slider-track').css('transform', 'translateX(' + (-n * 100) + '%)');
  currentSlide = n;
}

$('.slider-next').click(function() {
  currentSlide = (currentSlide + 1) % slideCount;
  goToSlide(currentSlide);
});

$('.slider-prev').click(function() {
  currentSlide = (currentSlide - 1 + slideCount) % slideCount;
  goToSlide(currentSlide);
});

HTML结构示例

<div class="slider-container">
  <div class="slider-track">
    <div class="slider-slide">Slide 1</div>
    <div class="slider-slide">Slide 2</div>
    <div class="slider-slide">Slide 3</div>
  </div>
  <button class="slider-prev">Prev</button>
  <button class="slider-next">Next</button>
</div>

CSS基础样式

.slider-container {
  position: relative;
  overflow: hidden;
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease;
}

.slider-slide {
  flex: 0 0 100%;
}

.slider-prev, .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.slider-prev {
  left: 10px;
}

.slider-next {
  right: 10px;
}