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