jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox

实现多浏览器支持的图片轮换展示效果并不难，下面是实现的步骤：

1. 定义HTML结构和CSS样式
   要实现多图片轮换展示效果，我们需要先定义一个包含图片和指示器 (indicator) 的结构。指示器指的是图片轮换时底部圆点的样式。代码如下所示：

<div class="carousel">
  <div class="slide active">
    <img src="img1.jpg" alt="Image 1">
  </div>
  <div class="slide">
    <img src="img2.jpg" alt="Image 2">
  </div>
  <div class="slide">
    <img src="img3.jpg" alt="Image 3">
  </div>
  <div class="slide">
    <img src="img4.jpg" alt="Image 4">
  </div>
  <div class="indicators">
    <ul>
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

接着，我们需要定义样式来布局和美化这个结构。下面是一个基本的样式：

.carousel {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

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

.slide.active {
  opacity: 1;
}

.slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.indicators ul {
  display: flex;
  justify-content: center;
}

.indicators li {
  margin: 0 10px;
  cursor: pointer;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
}

.indicators li.active {
  background-color: #000;
}

这个样式定义了一个相对定位的容器 (.carousel)，和绝对定位的轮换图片 (.slide)。轮换图片默认为透明，而底部Indicator的样式是橙色小圆点。

1. 实现JavaScript轮换效果
   上一步中，我们定义了用来展示轮换的主题结构和样式。接下来就需要用JS来控制轮换实现。下面是实现轮换的代码示例：

const slides = document.querySelectorAll('.slide');
const indicators = document.querySelectorAll('.indicators li');

let slideIndex = 0;

function updateSlide(slideIndex) {
  slides.forEach(slide => slide.classList.remove('active'));
  indicators.forEach(indicator => indicator.classList.remove('active'));
  slides[slideIndex].classList.add('active');
  indicators[slideIndex].classList.add('active');
}

function nextSlide() {
  slideIndex++;
  if (slideIndex > slides.length - 1) {
    slideIndex = 0;
  }
  updateSlide(slideIndex);
}

setInterval(nextSlide, 3000);  

这个代码实现了将图片放大展示的效果和“当前”图像的指针标识。接着，我们定义了两个函数：updateSlide() 和 nextSlide()。 updateSlide() 函数被用来更新当前轮换图片和指示器，而 nextSlide() 函数会每3秒调用 updateSlide() 函数来进行轮换。

到这里为止，我们已经成功实现了一个多浏览器支持的图片轮换展示效果。基本思路就是：定义HTML结构和样式，利用js编写实现轮换效果的代码。