焦点图轮播css+js

焦点图轮播，也称为滑动图片轮播，是一种常见的网页设计元素，通过CSS和JavaScript相结合，可以创建一个图像连续切换展示的效果。以下是基本步骤：

**HTML结构：**

<div class="carousel-container">
  <div class="slide" id="slide1"><img src="image1.jpg"></div>
  <div class="slide" id="slide2"><img src="image2.jpg"></div>
  <!-- ... -->
</div>
<button class="prev">上一张</button>
<button class="next">下一张</button>

**CSS样式：**

.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slide {
  display: none;
  /* 添加其他样式，如宽度、高度等 */
}

.active {
  display: block;
}

**JavaScript部分 (jQuery示例)**:

$(document).ready(function() {
  var slideIndex = 0;
  showSlides();

  function showSlides() {
    var i;
    $('.slide').each(function() {
      $(this).fadeOut(1000);
    });
    slideIndex++;
    if (slideIndex > $(".slide").length) {slideIndex = 1}    
    $('#slide' + slideIndex).fadeIn(1000).addClass('active');
    setTimeout(showSlides, 3000); // 每隔3秒自动切换到下一图
  }

  $('.prev').click(function() {
    if(slideIndex>1){
      slideIndex--;
    }
    showSlides();
  });

  $('.next').click(function() {
    slideIndex++;
    if(slideIndex>$(".slide").length){
      slideIndex=1;
    }
    showSlides();
  });
});