轮播图按钮

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3554084_q9vhc2nwt5q.css">

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 600px;

            height: 450px;

            border: 1px solid #000;

            margin: 0 auto;

            position: relative;

        }

        img {

            width: 100%;

            height: 100%;

        }

        .dots {

            width: 100%;

            height: 30px;

            background-color: rgba(0, 0, 0, 0.5);

            color: #fff;

            position: absolute;

            top: 0;

            left: 0;

            text-align: center;

        }

        .title {

            width: 100%;

            height: 30px;

            background-color: rgba(0, 0, 0);

            color: #fff;

            position: absolute;

            bottom: 0;

            left: 0;

            text-align: center;

        }

        button {

            width: 30px;

            height: 40px;

            position: absolute;

            top: 50%;

            margin-top: -20px;

        }

        button:nth-of-type(1) {

            left: 0;

        }

        button:nth-of-type(2) {

            right: 0;

        }

        .box2{

            position: absolute;

            right: 240px;

            bottom: 30px;

        }

        /* .box2 span:nth-child(1){

            background-color: #ff6347;

        } */

        span {

            display: inline-block;

            width: 25px;

            height: 25px;

            background-color: #999999;

            border-radius: 50%;

        }

    </style>

</head>

<body>

    <div class="box">

        <!-- 指示点 -->

        <p class="dots">1/4</p>

        <img src="./img/1.jpg" alt="">

        <!-- 图片标题 -->

        <p class="title">动漫1</p>

        <!-- 左右箭头 -->

        <button class="iconfont icon-xiangzuojiantou"></button>

        <button class="iconfont icon-xiangyoujiantou"></button>

        <div class="box2">

            <span></span>

            <span></span>

            <span></span>

            <span></span>

        </div>

    </div>

    <script>

        // 1.获取元素

        var dots = document.getElementsByClassName("dots")[0];

        var oImg = document.getElementsByTagName("img")[0];

        var title = document.getElementsByClassName("title")[0];

        var btn = document.getElementsByTagName("button");

        var arr = [

            "./img/1.jpg",

            "./img/2.jpg",

            "./img/3.jpg",

            "./img/4.jpg"

        ]

        // 2.点击下一张  arr[1]  arr[2]  arr[3]

        var n = 0;//初始化下标值

        btn[1].onclick = function () {

            n++;

            if (n > 3) { //下标超过3做判断

                n = 0;

            }

            console.log(n);

            //设置图片路径

            oImg.src = arr[n];

            // 重新设置标题内容和指示点内容

            dots.innerHTML = n + 1 + "/4";

            title.innerHTML = "动漫" + (n + 1);

            oSpan[n].style.backgroundColor = "#ff6347"

            oSpan[n-1].style.backgroundColor = ""

            // if (n = 0) {

            //     oSpan[3].style.backgroundColor = ""

            // }

            // oSpan[3].style.backgroundColor = ""

        }

       

        btn[0].onclick = function () {

            n--;

            if (n < 0) {

                n = 3;

            }

            console.log(n);

            // 设置图片路径

            oImg.src = arr[n];

            // 重新设置标题内容和指示点内容

            dots.innerHTML = n + 1 + "/4";

            title.innerHTML = "动漫" + (n + 1)

            oSpan[n].style.backgroundColor = "#ff6347"

            oSpan[n+1].style.backgroundColor = ""

        }



 

       

        var oSpan = document.getElementsByTagName("span");

        oSpan[0].onclick = function () {

            dots.innerHTML = n + 1 + "/4";

            title.innerHTML = "动漫" + 1;

            oSpan[0].style.backgroundColor = "#ff6347"

            oImg.src = "./img/1.jpg"

            oSpan[1].style.backgroundColor = ""

            oSpan[2].style.backgroundColor = ""

            oSpan[3].style.backgroundColor = ""

        }

        oSpan[1].onclick = function () {

            dots.innerHTML =  2 + "/4";

            oSpan[1].style.backgroundColor = "#ff6347"

            oImg.src = "./img/2.jpg"

            oSpan[0].style.backgroundColor = ""

            title.innerHTML = "动漫" + 2;

            oSpan[2].style.backgroundColor = ""

            oSpan[3].style.backgroundColor = ""

        }

        oSpan[2].onclick = function () {

            dots.innerHTML =  3 + "/4";

            oSpan[2].style.backgroundColor = "#ff6347"

            oImg.src = "./img/3.jpg"

            oSpan[0].style.backgroundColor = ""

            oSpan[1].style.backgroundColor = ""

            oSpan[3].style.backgroundColor = ""

            title.innerHTML = "动漫" + 3;

        }

        oSpan[3].onclick = function () {

            dots.innerHTML =  4 + "/4";

            oSpan[3].style.backgroundColor = "#ff6347"

            oImg.src = "./img/4.jpg"

            oSpan[0].style.backgroundColor = ""

            oSpan[1].style.backgroundColor = ""

            oSpan[2].style.backgroundColor = ""

            title.innerHTML = "动漫" + 4;

        }

    </script>

</body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值