JS实现小图放大轮播页面效果入下（图片为优行商旅页面照片）：
实现效果：
图片自动轮播，鼠标移入停止，移出继续轮播
点击下方小图可以实现切换
步骤一：建立HTML布局，具体如下：
<body> <div id="carousel" class="carousel" onmouseover="stop()" onmouseout="again()"> <ul class="list" id="ulctrl"> <li class="trans"><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> </div> </body>
其中div为图片轮播区域，li用于放置小图
步骤二：CSS布局
*{ margin:0; padding:0; } ul{ list-style: none; height:auto; position: absolute; top:95%; left:32%; } #carousel{ width:100%; height:400px; background-image: url(images/1.jpg); background-repeat: no-repeat; background-position: center; position: relative; } li{ float:left; margin-right: 20px; } span{ display: block; width:110px; height:41px; background-size: 110px 41px; border:none; } li:nth-child(1) span{ background-image: url(images/1.jpg); border:2px solid orange; } li:nth-child(2) span{ background-image: url(images/2.jpg); } li:nth-child(3) span{ background-image: url(images/3.jpg); } li:nth-child(4) span{ background-image: url(images/4.jpg); }
通过定位使小图显示在下方，此时轮播区域显示的为第一张图片
步骤三：添加JS逻辑（其中该代码注释中的圆点是指轮播图下方小图）
let cnt=1;//计数器 let ulctrl=document.getElementById("ulctrl");//圆点控制器 let lis=ulctrl.children;//圆点们 let linow=lis[0];//初始化当前圆点为第一个 let clock;//声明计时器 var carousel=document.getElementById("carousel");//背景容器 for(let i=0;i<lis.length;i++){ //给圆点绑定函数，点击改变圆点样式和图片 lis[i].onclick=function (){ cnt=i+1; carousel.style.backgroundImage="url(images/"+cnt+".jpg)"; for(let li of lis){ li.children[0].style.border = 'none'; } this.children[0].style.border = '2px solid orange'; } } //改变圆点样式 function ctrl(){ linow.children[0].style.border = 'none'; linow=lis[cnt-1]; linow.children[0].style.border = '2px solid orange'; } //鼠标覆盖轮播图，停止轮播 function stop(){ clearInterval(clock);//清除计时器 } //鼠标离开轮播图，继续轮播 function again(){ clock=setInterval(this.start, 2000);//创建计时器 } //轮播函数 function start(){ if(cnt==4){ cnt=1; }else{ cnt++;//更新计数器 } carousel.style.backgroundImage="url(images/"+cnt+".jpg)"; ctrl();//轮播状态下改变圆点样式 } (function move(){ clock=setInterval(this.start, 2000);//创建计时器，2秒执行一次start函数 })();//自执行函数