当前位置：首页 > jquery

jquery轮播代码

2026-02-03 10:26:52jquery

jquery轮播代码

以下是一个基于jQuery实现的简单轮播代码示例，包含自动播放和手动切换功能：

HTML结构

<div class="slider-container">
  <div class="slider">
    <img src="image1.jpg" class="slide active">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
  </div>
  <div class="slider-controls">
    <button class="prev">Previous</button>
    <button class="next">Next</button>
  </div>
  <div class="slider-dots"></div>
</div>

CSS样式

.slider-container {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slide.active {
  opacity: 1;
}

.slider-controls {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}

.slider-dots {
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
}

.slider-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}

.slider-dot.active {
  background: #333;
}

jQuery代码

$(document).ready(function() {
  // 初始化轮播
  const slides = $('.slide');
  const dotsContainer = $('.slider-dots');
  let currentSlide = 0;
  let slideInterval;

  // 创建指示点
  slides.each(function(index) {
    dotsContainer.append('<div class="slider-dot" data-index="' + index + '"></div>');
  });

  const dots = $('.slider-dot');
  dots.eq(0).addClass('active');

  // 切换幻灯片函数
  function goToSlide(index) {
    slides.removeClass('active');
    dots.removeClass('active');
    slides.eq(index).addClass('active');
    dots.eq(index).addClass('active');
    currentSlide = index;
  }

  // 下一张
  function nextSlide() {
    let next = currentSlide + 1;
    if (next >= slides.length) {
      next = 0;
    }
    goToSlide(next);
  }

  // 上一张
  function prevSlide() {
    let prev = currentSlide - 1;
    if (prev < 0) {
      prev = slides.length - 1;
    }
    goToSlide(prev);
  }

  // 自动播放
  function startSlider() {
    slideInterval = setInterval(nextSlide, 3000);
  }

  function stopSlider() {
    clearInterval(slideInterval);
  }

  // 事件绑定
  $('.next').click(function() {
    nextSlide();
    stopSlider();
    startSlider();
  });

  $('.prev').click(function() {
    prevSlide();
    stopSlider();
    startSlider();
  });

  dots.click(function() {
    const dotIndex = $(this).data('index');
    goToSlide(dotIndex);
    stopSlider();
    startSlider();
  });

  // 鼠标悬停暂停
  $('.slider-container').hover(
    function() {
      stopSlider();
    },
    function() {
      startSlider();
    }
  );

  // 开始轮播
  startSlider();
});