JS实现小图放大轮播效果

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

JS实现小图放大轮播效果

猜你喜欢