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函数
})();//自执行函数
