使用JS语言编写一个模仿网页首页图片新闻的程序。效果要求如下： 1实现页面内三幅图片自动切换当鼠标放在图片上时图片停止切换。 2点击图片时打开图片对应的新闻内容页面

HTML代码：

<div class="slider">
  <ul class="slider-list">
    <li><a href="news1.html"><img src="news1.jpg" alt="news1"></a></li>
    <li><a href="news2.html"><img src="news2.jpg" alt="news2"></a></li>
    <li><a href="news3.html"><img src="news3.jpg" alt="news3"></a></li>
  </ul>
</div>

CSS代码：

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 1500px;
  position: absolute;
  top: 0;
  left: 0;
}

.slider-list li {
  float: left;
}

.slider-list li img {
  display: block;
  width: 500px;
  height: 300px;
}

.slider-nav {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.slider-nav li {
  display: inline-block;
  margin: 0 5px;
}

.slider-nav li a {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
}

.slider-nav li.active a {
  background-color: #666;
}

JS代码：

var slider = document.querySelector('.slider');
var sliderList = document.querySelector('.slider-list');
var sliderItems = document.querySelectorAll('.slider-list li');
var sliderNav = document.createElement('ul');
sliderNav.classList.add('slider-nav');

for (var i = 0; i < sliderItems.length; i++) {
  var sliderNavItem = document.createElement('li');
  var sliderNavLink = document.createElement('a');
  sliderNavLink.setAttribute('data-index', i);
  sliderNavLink.addEventListener('mouseover', function() {
    clearInterval(sliderTimer);
  });
  sliderNavLink.addEventListener('mouseout', function() {
    sliderTimer = setInterval(sliderNext, 3000);
  });
  sliderNavLink.addEventListener('click', function(e) {
    e.preventDefault();
    var index = parseInt(this.getAttribute('data-index'));
    sliderIndex = index;
    sliderOffset = -sliderIndex * sliderWidth;
    sliderList.style.transform = 'translateX(' + sliderOffset + 'px)';
    updateSliderNav();
  });
  sliderNavItem.appendChild(sliderNavLink);
  sliderNav.appendChild(sliderNavItem);
}

slider.appendChild(sliderNav);

var sliderIndex = 0;
var sliderWidth = slider.clientWidth;
var sliderOffset = 0;
var sliderTimer = setInterval(sliderNext, 3000);

function sliderNext() {
  sliderIndex++;
  if (sliderIndex >= sliderItems.length) {
    sliderIndex = 0;
  }
  sliderOffset = -sliderIndex * sliderWidth;
  sliderList.style.transition = 'transform 0.5s ease-in-out';
  sliderList.style.transform = 'translateX(' + sliderOffset + 'px)';
  updateSliderNav();
}

function updateSliderNav() {
  var sliderNavItems = sliderNav.querySelectorAll('li');
  for (var i = 0; i < sliderNavItems.length; i++) {
    sliderNavItems[i].classList.remove('active');
  }
  sliderNavItems[sliderIndex].classList.add('active');
}

sliderList.addEventListener('transitionend', function() {
  if (sliderIndex === 0) {
    sliderList.style.transition = 'none';
    sliderOffset = -sliderIndex * sliderWidth;
    sliderList.style.transform = 'translateX(' + sliderOffset + 'px)';
  }
});

window.addEventListener('resize', function() {
  sliderWidth = slider.clientWidth;
  sliderOffset = -sliderIndex * sliderWidth;
  sliderList.style.transition = 'none';
  sliderList.style.transform = 'translateX(' + sliderOffset + 'px)';
});

说明：

1. 使用 setInterval 实现定时切换图片，使用 clearInterval 和 mouseover、mouseout 事件实现鼠标悬停停止切换；
2. 利用 CSS 的 overflow: hidden 和绝对定位实现图片的轮播效果；
3. 利用 transition 实现图片切换动画，利用 transitionend 事件处理无限循环切换；
4. 利用 resize 事件处理窗口变化时的响应