js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）

实现有过渡渐变效果的图片轮播相册需要使用CSS3的transition属性和JavaScript实现。下面是完整的攻略：

步骤一：HTML结构

首先，需要在HTML中写出轮播相册的结构。这里以一个简单的轮播相册为例，代码如下：

<div class="slider">
  <ul>
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
  </ul>
</div>

步骤二：CSS样式

接下来，需要为轮播相册添加CSS样式。主要是设置slider容器的宽度和高度，并将ul元素的列表样式去除。

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  margin: 0 auto;
}
.slider ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.slider ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slider ul li.active {
  opacity: 1;
}

这里的关键是设置li元素的opacity属性为0，并为其添加过渡效果，在切换图片时，通过添加.active类来让其渐变显示。

步骤三：JavaScript代码

最后，需要使用JavaScript来实现图片的轮播。这里使用了一个自执行函数，将整个代码封装在内部，并在页面加载完成时直接执行。

(function() {
  // 获取DOM节点
  var slider = document.querySelector('.slider');
  var sliderList = slider.querySelector('ul');
  var sliderItems = slider.querySelectorAll('li');
  var currentIndex = 0;

  // 初始化轮播
  function initSlider() {
     sliderItems[0].classList.add('active');
     setInterval(function() {
         currentIndex = currentIndex < sliderItems.length - 1 ? currentIndex + 1 : 0;
         showSlider(currentIndex);
     }, 3000);
  }

  // 显示当前轮播项
  function showSlider(index) {
     for(var i = 0; i < sliderItems.length; i++) {
         sliderItems[i].classList.remove('active');
     }
     sliderItems[index].classList.add('active');
  }

  // 页面加载完成后初始化轮播
  window.addEventListener('load', initSlider);
})();

这里的关键是通过setInterval函数循环切换轮播项，通过为当前轮播项添加.active类实现过渡动画效果。此外，为了兼容IE浏览器，使用了兼容性写法querySelectorAll和addEventListener方法。