轮播图 dom事件

最新推荐文章于 2023-04-19 11:40:43 发布

-Ali

最新推荐文章于 2023-04-19 11:40:43 发布

阅读量178

点赞数 1

分类专栏： js 文章标签： dom

本文链接：https://blog.csdn.net/weixin_47492981/article/details/105991096

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>轮播图</title>
        <link rel="stylesheet" href="aa.css">
    </head>
    <body>
        <div class="aaa">
            <ul class="list">
                <li class="bb active"> <!--设置多个类名-->
                    <img src="1.png">
                </li>
                <li class="bb">
                    <img src="2.png">
                </li>
                <li class="bb">
                    <img src="3.png">
                </li>
                <li class="bb">
                    <img src="4.png">
                </li>
            </ul>
            <ul class="pointList">  <!--圆点-->
                <!--data-index为HTML5标准里面存数据的方法，使点击哪个圆点就可以获取相对应的图片-->
                <li class="point active" data-index="0"></li>
                <li class="point" data-index="1"></li>
                <li class="point" data-index="2"></li>
                <li class="point" data-index="3"></li>
            </ul>

            <!--点击上下张图片按钮-->
            <button type="button" class="btn" id="goLast"><</button>
            <button type="button" class="btn" id="goNext">></button>
        </div>
        <script type="text/javascript" src="aa.js"></script>
    </body>
</html>

css代码：

.aaa {
    width: 500px;
    height: 500px;
    position: relative;
}
.list {
    width: 500px;
    height: 500px;
    position: relative;
    padding-left: 0px;
}
.bb {
    width: 100%;
    height: 100%;
    list-style: none;
    position: absolute;
}
.bb.active {
    z-index: 20; /**设置元素的层级，这样显示的图片为第一张*/
}
.btn {
    width: 40px;
    height: 60px;
    position: absolute; /**子绝父相，需在父级aaa中设置相对定位*/
    top: 220px;
    opacity: 0.4;
    z-index: 30;
}
 #goLast {
     left: 0px; 
 }
 #goNext {
     right: 0px;
 }
 .pointList {
     padding-left: 0px;
     list-style: none;
     position: absolute;
     right: 250px;
     bottom: 10px;
     z-index: 30;
 }
 .point {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.4);
     float: left;
     margin-right: 8px; /**设置圆点之间的距离*/
     border-style: solid;
     border-width: 1px;
     border-color: rgba(255, 255, 255, 0.4);
     cursor: pointer; /**点击圆点时鼠标样式为小手*/
 }
 .point.active {
    background-color: rgba(255, 255, 255, 1);/**点击每个圆点或自动播放时圆点的颜色为白色*/
 }

js代码：

//获取li、button和point元素
var bbs = document.getElementsByClassName("bb");
var goLastBtn = document.getElementById("goLast");
var goNextBtn = document.getElementById("goNext");
var points = document.getElementsByClassName("point");

var time = 0;//定时器时间跳转参数

//设置元素的索引值，index表示第几张图片在展示-->第index张图片有active这个类名
var index = 0;  //index = 0为第一张图片

//清理掉active这个类
var clearActive = function() { 
    for (var i = 0;i < bbs.length;i++) { //遍历li中的每一张图片
        bbs[i].className = "bb"; //让类名只有bb
    }

    for (var i = 0;i < points.length;i++) {
        points[i].className = "point"; //让类名只有point
    }
}

var goIndex = function() { 
    clearActive(); //调用clearActive（），把全部的active类名都删掉
    bbs[index].className = "bb active"; //给想要展示的第index张图片加上active这个类名
    points[index].className = "point active";
}

//goNext事件和goLast事件
var goNext = function() { 
    if(index < 3) {
        index ++;
    } else {
        index = 0; //播放到第四张图片的时候点goNext按钮跳转到第一张图片
    }
    goIndex();
}

var goLast = function() {
    if(index == 0) {
        index = 3; //播放到第一张图片的时候点goLast按钮跳转到第四张图片
    } else {
        index --;
    }
    goIndex();
}

goNextBtn.onclick=goNext;  //goNextBtn被点击时调用goNext方法
goLastBtn.onclick=goLast; 

//point事件
for (var i = 0;i < points.length;i++) {
    points[i].onclick=function() {
        var pointIndex = this.getAttribute("data-index");
        index = pointIndex; //让点击的圆点能与播放的图片相对应
        goIndex();
        time = 0;//手动点击图片时要清空计时器，不然图片会很快跳转，不会在2秒之后跳转
    }
}

//定时器（自动播放）
setInterval(function() { 
    time ++;
    if(time == 20) {  //time的数值为20时播放下一张图片，间隔时间为2s
        goNext();
        time = 0; //time为20播放到下一张图片的时候又为0继续循环
    }
     },100)

定时器分为两种：超时定时器（setTimeout）和循环定时器（setInterval）

-Ali

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
轮播图 dom事件

html代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图</title> <link rel="stylesheet" href="aa.css"> </hea...
复制链接

扫一扫

专栏目录