JS轮播图

最新推荐文章于 2022-04-19 13:40:21 发布

特立独行の猫

最新推荐文章于 2022-04-19 13:40:21 发布

阅读量2.6k

点赞数 8

分类专栏：前端开发文章标签： js轮播图轮播图定时轮播图

本文链接：https://blog.csdn.net/weixin_44139445/article/details/87217602

版权

前端开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JS轮播图

在这里插入图片描述
前端小白，有问题还望指出，谢谢！

实现原理：让若干张图片漂浮起来(float)，这些图片都放在无序列表中，然后放两个按钮标签，
根据层级(index)的不同，最上面的才能显示。所以我们用这两个按钮来控制图片的层级。
在这里插入图片描述
第一步：建一个盒子将5张图和两个按钮放进去

<div class="wrap">
    <ul class="list">
        <li class="item active">0</li>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
    </ul>
    <button type="button" class="btn" id="goPre"> <</button>
    <button type="button" class="btn" id="goNext"> ></button>
</div>

第二步：给每个部分添加css样式

 <style type="text/css">
        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }
        .list {
            width: 800px;
            height: 400px;
            list-style: none;
            position: relative;
            padding-left: 0px;
        }
        .item {
            position: absolute;
            width: 100%;
            height: 100%;
            color: white;
            font-size: 50px;
            opacity: 0;
            transition: all .8s;
        }
        .item:nth-child(1) {
            background-color: black;
        }
        .item:nth-child(2) {
            background-color: red;
        }
        .item:nth-child(3) {
            background-color: yellow;
        }
        .item:nth-child(4) {
            background-color: green;
        }
        .item:nth-child(5) {
            background-color: blue;
        }
        .btn {
            width: 50px;
            height: 100px;
            position: absolute;
            top: 150px;
            z-index: 100;
        }
        #goPre {
            left: 0px;
        }
        #goNext {
            right: 0px;
        }
        .item.active {
            opacity: 1;
            z-index: 10;
        }
   </style>

第三步：编写js部分

1.获取到图片、按钮，定义一个index来表示第几张图片
2.编写函数部分

clearActive函数是为了给每张图片初始化属性，图片显示的原理就是给需要显示的图片className加一个active，然后让有该className的图片index显示到最上面。
goIndex函数先调用了clearActive，然后给items数组里index对应图片赋予active的className。
goNext函数是对应了点击事件的判断下一张的index<4，即不是最后一张，则index+1；否则跳到第一张。goPre类同。

3.最后就是给按钮添加事件了，点一下执行goNext()或goPre()，让index变化。

<script type="text/javascript">
    var items = document.getElementsByClassName('item');

    var goPreBtn = document.getElementById('goPre');
    var goNextBtn = document.getElementById('goNext');

    var index = 0;//index表示第几张图片在展示--第index长图片有active这个类名

    var clearActive = function () {
        for (var i = 0; i < items.length; i++) {
            items[i].className = 'item';
        }
    }
    var goIndex = function () {
        clearActive();
        items[index].className = 'item active';
    }
    var goNext = function () {
        if (index < 4) {
            index++;
        } else {
            index = 0;
        }
        goIndex();
    }
    var goPre = function () {
        if (index > 0){
            index--;
        }else{
            index = 4;
        }
        goIndex();
    }
    goNextBtn.addEventListener('click', function () {
            goNext();
        })
    goPreBtn.addEventListener('click',function () {
            goPre();
        })
</script>

最后我添加了底部小圆点和定时功能，附上源代码。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }

        .list {
            width: 800px;
            height: 400px;
            list-style: none;
            position: relative;
            padding-left: 0px;
        }

        .item {
            position: absolute;
            width: 100%;
            height: 100%;
            color: white;
            font-size: 50px;
            opacity: 0;
            transition: all .8s;
        }

        .item:nth-child(1) {
            background-color: black;
        }

        .item:nth-child(2) {
            background-color: red;
        }

        .item:nth-child(3) {
            background-color: yellow;
        }

        .item:nth-child(4) {
            background-color: green;
        }

        .item:nth-child(5) {
            background-color: blue;
        }

        .btn {
            width: 50px;
            height: 100px;
            position: absolute;
            top: 150px;
            z-index: 100;
        }

        #goPre {
            left: 0px;
        }

        #goNext {
            right: 0px;
        }

        .item.active {
            opacity: 1;
            z-index: 10;
        }
        .pointList{
            padding-left: 0px;
            list-style: none;
            position: absolute;
            right: 20px;
            bottom: 10px;
            z-index: 1000;
        }
        .point{
            width: 8px;
            height: 8px;
            background-color: rgba(0,0,0,.4);
            border-radius: 100%;
            float: left;
            margin-right: 14px;
            border-style: solid;
            border-width: 2px;
            border-color: rgba(255,255,255,.6);

            cursor: pointer;
        }
        .point.active{
            background-color: rgba(255,255,255,.4);
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul class="list">
        <li class="item active">0</li>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
    </ul>
    <ul class="pointList">
        <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>
        <li class="point" data-index= '4'></li>
    </ul>
    <button type="button" class="btn" id="goPre"> <</button>
    <button type="button" class="btn" id="goNext"> ></button>
</div>
<script type="text/javascript">
    var items = document.getElementsByClassName('item');
    var points = document.getElementsByClassName('point');
    var goPreBtn = document.getElementById('goPre');
    var goNextBtn = document.getElementById('goNext');

    var index = 0;//index表示第几张图片在展示--第index长图片有active这个类名
    //第几个点在展示
    var time = 0;//定时器图片跳转参数
    var clearActive = function () {
        for (var i = 0; i < items.length; i++) {
            items[i].className = 'item';
        }
        for (var i = 0; i < points.length; i++) {
            points[i].className = 'point';
        }
    }
    var goIndex = function () {
        clearActive();
        items[index].className = 'item active';
        points[index].className = 'point active';
    }
    var goNext = function () {
        if (index < 4) {
            index++;
        } else {
            index = 0;
        }
        goIndex();
    }
    var goPre = function () {
        if (index > 0){
            index--;
        }else{
            index = 4;
        }
        goIndex();
    }
        goNextBtn.addEventListener('click', function () {
            goNext();
        })
        goPreBtn.addEventListener('click',function () {
            goPre();
        })
    for (var i = 0;i<points.length;i++) {
        points[i].addEventListener('click',function(){
            var pointIndex = this.getAttribute('data-index')
            index = pointIndex;
            goIndex();
            time = -10;
        })
    }
    setInterval(function () {
        time ++;
        if (time == 20) {
            goNext();
            time = 0;
        }
    },100)
</script>
</body>
</html>