摘要：
JS实现小图放大轮播页面效果入下（图片为优行商旅页面照片）：实现效果：图片自动轮播，鼠标移入停止，移出继续轮播点击下方小图可以实现切换步骤一：建立HTML布局，具体如下：˂liclass
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'; } } //改变圆点样式 functionctrl(){ linow.children[0].style.border = 'none'; linow=lis[cnt-1]; linow.children[0].style.border = '2px solid orange'; } //鼠标覆盖轮播图，停止轮播 functionstop(){ clearInterval(clock);//清除计时器 } //鼠标离开轮播图，继续轮播 functionagain(){ clock=setInterval(this.start, 2000);//创建计时器 } //轮播函数 functionstart(){ if(cnt==4){ cnt=1; }else{ cnt++;//更新计数器 } carousel.style.backgroundImage="url(images/"+cnt+".jpg)"; ctrl();//轮播状态下改变圆点样式 } (functionmove(){ clock=setInterval(this.start, 2000);//创建计时器，2秒执行一次start函数 })();//自执行函数