JS----轮播图的实现-优快云博客

本文链接：https://blog.youkuaiyun.com/wangtao_4/article/details/142993959

JS----轮播图的实现

HTML与CSS基本样式
图片的自动播放
- timer定时器
箭头与图片的移动
- onclick点击事件
聚焦与失焦
- onmouseover事件
- onmouseout事件
圆点与图片的同步移动
- onclick点击事件

一，目的：本节主要是为了熟悉JS的代码操作，所以重点只放在与JS有关的部分上
首先，建三个文件，一个Lindex.html文件，用于存放html标签和主体；一个Lindex.css文件，用于实现CSS样式；一个Lindex.js文件，用于存放JS部分的代码，以下，我直接给出Lindex.html和Lindex.css文件的代码作为参考

Lindex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./css/Lindex.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/icofont/iconfont.css">
</head>
<body>
    <!-- 轮播图 -->
     <div class="header">
        <div class="wrap">
            <div class="slide">
                <a href="#">
                    <img class="img" src="./images/image/1.webp" alt="ad">
                </a>
               <a href="#" class="prev"></a>
               <a href="#" class="next"></a>
               <ul class="banner-btn">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
               </ul>
            </div>
        </div>
     </div>

    <!-- 引入JS样式 -->
     <script src="./js/Lindex.js"></script>
</body>
</html>

Lindex.css

.header{
    width: 100%;
    height: 500px;
    margin: 0 auto;
    background-color: #f3f3f3;
    
}

.wrap{
    width: 600px;
    height: 500px;
    margin: auto;
}

.slide{
    position: relative;
    width: 590px;
    height: 470px;
    background-color: aliceblue;
    border-top: 15px;
}

.img{
    margin: 15px auto;
}

.prev,.next{
    width: 25px;
    height: 30px;
    position: absolute;
    background-color: rgb(240, 6, 6);
    line-height: 30px;
    font-size: 20px;
    cursor: pointer;
    top: 50%;
    margin-top: -20px;
}

.prev{
    left: 0;
    border-radius: 0 18px 18px 0;
}

.next{
    right: 0;
    border-radius: 18px 0 0 18px;
}

.banner-btn{
    width: 120px;
    height: 15px;
    position: absolute;
    left: 30px;
    bottom: 30px;
}

.banner-btn li{
    width: 8px;
    height: 8px;
    border-radius: 50%;  /* 50% */
    margin-right: 4px;
    border: 1px solid rgb(0, 0, 0.05);
    background-color: rgba(255, 255, 255, 0.5);
    float: left;
}

.banner-btn .active{
    top: -2px;
    position: relative;
    width: 8px;
    height: 8px;
    border: 3px solid rgb(0, 0,0, 0.1);
    background-color: rgba(255, 255, 255, 1);
}

二，准备工作，首要将需要用到的类和HTML标签引入到Lindex.js文件中，并定义好一个计数器count，用来计数(定义为全局变量最好),定义一个imgArr数组用来存放你需要展示的图片，如下

let img=document.querySelector('.img');
let slide=document.querySelector('.slide');
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');
let lis=document.querySelectorAll('.banner-btn li');

// 定义个数组，用来存放图片
let imgArr=['1.webp','2.jpg','3.jpg','4.jpg','5.webp','6.webp','7.jpg','8.jpg'];
//定义一个计数器
let count=0;

然后，在定义一个函数cutImg()用来切换图片

let cutImg=function(){
    img.src="./images/image/"+imgArr[count];
    }

三，现在来实现timer，定义一个定时器timer，用来定时自动切换图片，这里主要用到一个函数setInterval()，()类主要包含两个参数，第一个参数里在放一个函数，用于自动切换图片，第二个参数用于定义切换图片的时间间隔,如下

//顶一个定时器,规定图片切换时间
let timer=setInterval(function(){
    count++;
    //当count已经来到了最后一张时，让count又从第一张重新开始
    if(count>imgArr.length-1){
        count=0;
    }
    cutImg();
},2000)

四，箭头与图片的移动，这里主要与onclick点击事件有关，
（1）实现图片向上一张移动，需要注意一点的是，当count减为0时，我这里让它从最后一张开始，如下

//实现上一张
prev.onclick=function(){
    count--;
    if(count<0){
        count=imgArr.length-1;
    }
    cutImg();
}

（2）实现图片向下一张移动，同样的，当count已经到最后一张时，我这里让他从第一张开始，如下

next.onclick=function(){
    count++;
    if(count>imgArr.length-1){
        count=0;
    }
    cutImg();
}

五，失焦与聚焦，这里主要与两个事件有关，onmouseover事件与onmouseout是事件
（1）聚焦，即让timer失效，让timer失效则与clearInterval有关，如下

//鼠标失焦时，不动 即timer失效
slide.onmouseover=function(){
    clearInterval(timer);
}

（2）失焦，则是让timer重新生效，简单来说，就是将我们第一次定义的timer的函数重新赋值给timer，如下

//鼠标失焦时，timer生效
slide.onmouseout=function(){
    timer=setInterval(function(){
        count++;
        if(count>imgArr.length-1){
            count=0;
        }
        cutImg();
    },2000)
}

六，远点与图片的同步移动，实际效果如下

由于let lis=document.querySelectorAll('.banner-btn li');引入了八个li标签，所以可以将lis看作是一个数组，在这里同样的需要一个onclick点击事件，当随机点击一个圆点时，也切换到相应的图片，如下

//实现图片与圆点同步切换
for(let i=0;i<lis.length;i++){
    lis.onclick=function(){
        count=i;
        cutImg();
    }
}

不过，为了让圆点的css样式也同步切换，还需要在let cutImg=function()中添加一段代码，如下

let cutImg=function(){
    img.src="./images/image/"+imgArr[count];

    for(let i=0;i<lis.length;i++){
        lis[i].className=''; //将所有的li标签的样式设置为空
    }
    lis[count].className='active'; //这里让对应的li标签样式为".active"
}