css与js图片轮播特效

CSS和JavaScript（简称JS）技术都可以用来实现图片轮播特效。CSS实现图片轮播特效主要依赖于CSS的transition和animation属性，而JavaScript则依赖于DOM操作和定时器。下面我们来分别介绍这两种技术的使用。

CSS实现图片轮播特效

/* 实现轮播的CSS */
.slider {
  display: flex; /* 将轮播项横向排列 */
  overflow: hidden; /* 隐藏溢出的轮播项 */
  animation: slide 8s infinite; /* 设置轮播周期和循环轮播 */
}

/* 定义轮播动画 */
@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  25%{
    transform: translateX(-100%);
  }
  50%{
    transform: translateX(-200%);
  }
  75%{
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
} 

JavaScript实现图片轮播特效

// 获取轮播图和页码元素
let slider = document.querySelector('.slider-js');
let pages = document.querySelectorAll('.page-js');

// 初始化轮播图状态
let index = 0;
let timer = null;
autoPlay();

// 定时器实现自动轮播
function autoPlay() {
  timer = setInterval(() => {
    index++;
    if (index >= pages.length) {
      index = 0; // 回到第一个轮播项
    }
    play(index);
  }, 3000);
}

// 播放对应的轮播项
function play(index) {
  // 高亮当前页码
  for (let i = 0; i < pages.length; i++) {
    pages[i].classList.remove('active');
  }
  pages[index].classList.add('active');
  // 移动轮播图
  let offset = index * -100 + '%'; // 计算偏移量
  slider.style.transform = `translateX(${offset})`;
}

// 鼠标移入停止轮播，移出继续轮播
slider.onmouseover = () => {
  clearInterval(timer);
}
slider.onmouseout = () => {
  autoPlay();
} 

无论是使用CSS还是JavaScript实现图片轮播特效，都需要一些样式和动画的支持。在这个过程中，开发者需要对CSS或JavaScript这两种技术有一定的理解和掌握，才能更好地实现轮播效果。