本文共 3527 字，大约阅读时间需要 11 分钟。

.html 结构

    
            
        
    
             
             
     
                  
                  
                  
                  
              
     
                
             
     
                  
      
            
      
            
      
            
      
        
     
        
             
     
                  
      <            
      >        
     
    
    

.css 样式文件

html, body, ul {	margin: 0;	padding: 0;}ul {	list-style: none;}.scroll, .scroll-img, img {	width: 613px;	height: 230px;}.scroll {	margin: 50px auto;	position: relative;	/*用户不可拖拽选中*/	user-select: none;}.scroll-img{	position: absolute;}/*设置轮播图片，同位置按照指定状态显示*/img{	position: absolute;	/*不可见*/	opacity: 0;}/*活跃状态下的img，可见*/img.active{	opacity: 1;}/*右下选图按钮*/ul{	position: absolute;	bottom: 10px;	right: 20px;}li{	/*画圈用于点击*/	width: 8px;	height: 8px;	border: 2px solid #888;	border-radius: 50%;	float: left;	margin-left: 10px;	background-color: transparent;	/*鼠标悬浮样式*/	cursor: pointer;}/*活跃状态下的li，变色*/li.active {	transition: .2s;	background-color: #999;}/*左右切换按钮*/.toggle-left, .toggle-right {	width: 40px;	height: 80px;	background-color: rgba(255,255, 255, 0.7);	line-height: 80px;	text-align: center;	font-size: 30px;	position: absolute;	top: 75px;	border-radius: 5px;	/*默认状态不可见*/	opacity: 0;}.toggle-left {	left: 2px;}.toggle-right {	right: 2px;}/*鼠标悬浮，可见，鼠标状态改变*/.scroll:hover .toggle-left, .scroll:hover .toggle-right {	transition: .1s;	opacity: 1;	cursor: pointer;}

 

.js 文件

// 获取页面内组件信息let imgs = document.querySelectorAll('img');let lis = document.querySelectorAll('li');let toggle_left = document.querySelector('.toggle-left');let toggle_right = document.querySelector('.toggle-right');let scroll = document.querySelector('.scroll');// 活跃的lilet li_active = null;// 活跃的imglet img_active = null;// 活跃的索引,给imgs和lis使用，二者活跃索引对应let c_index = 0;// 定时器let timer = 0;// 自动轮播，定时器放在函数内，方便后续停止和继续播放function autoPlay() {	timer = setInterval(function () {		// 清除当前活跃状态		imgs[c_index].className = "";		lis[c_index].className = "";		// 循环的转折，遇3接1		c_index = c_index == 3 ? -1 : c_index;		// 轮播索引一次加一		c_index++;		// 设置新的活跃状态		imgs[c_index].className = "active";		lis[c_index].className = "active";		// 更新活跃的li|img，服务于点击切换		li_active = lis[c_index];		img_active = imgs[c_index];	},3000)}autoPlay();// 监控鼠标时间，改变自动轮播状态scroll.onmouseover = function () {	// 清除自动轮播	clearInterval(timer);}scroll.onmouseout = function () {	// 重新开启自动轮播	autoPlay();}// 右下，点击切换动画for (let i = 0; i < lis.length; i++) {	// 记录当前活跃li|img	if (lis[i].className == "active") {		li_active = lis[i];		img_active = imgs[i];	}	// 点击时间	lis[i].onclick = function () {		// 切换活跃的li		li_active.className = "";		this.className = "active";		li_active = this;		// 切换活跃的img		img_active.className = "";		imgs[i].className = "active";		img_active = imgs[i];		// 更新活跃的索引，服务于自动轮播		c_index = i;	}}// 左右按钮toggle_left.onclick = function () {	// 清除当前活跃状态	li_active.className = "";	img_active.className = "";	// 循环的转折，遇0接3	c_index = c_index == 0 ? 4 : c_index;	// 轮播索引一次加一	c_index--;	// 设置新的活跃状态	imgs[c_index].className = "active";	lis[c_index].className = "active";	// 更新活跃的li|img，服务于点击切换	li_active = lis[c_index];	img_active = imgs[c_index];}toggle_right.onclick = function () {	// 清除当前活跃状态	imgs[c_index].className = "";	lis[c_index].className = "";	// 循环的转折，遇3接0	c_index = c_index == 3 ? -1 : c_index;	// 轮播索引一次加一	c_index++;	// 设置新的活跃状态	imgs[c_index].className = "active";	lis[c_index].className = "active";	// 更新活跃的li|img，服务于点击切换	li_active = lis[c_index];	img_active = imgs[c_index];}