轮播图图图

BBsix666

已于 2023-01-18 13:09:12 修改

阅读量108

点赞数

文章标签： css css3 前端

于 2023-01-18 04:12:43 首次发布

本文链接：https://blog.csdn.net/BBsix666/article/details/128719028

版权

轮播图图

1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；
3.点击左右箭头可以进行左右图片的切换；
4.图片上需有介绍的文字，会随图片切换一起进行切换。

这个烂尾了，俺不会做，就完成了第一步自动轮播，希望能给一分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">
        .imgBox {
            width: 100%;
            height: 250px;
            margin: 0 auto;
            position: relative;
        }

        .left{
            float: left;
            font-size: 30px;
            background-color: rgb(123, 96, 96);
            opacity: 0;
            width: 20px;
            height: 30px;
            left: 600px;
            top: 200px;
            position: absolute;
        }
        .right{
            float: left;
            font-size: 30px;
            background-color: rgb(123, 96, 96);
            opacity: 0;
            width: 20px;
            height: 30px;
            right: 600px;
            top: 200px;
            position: absolute;
        }

        .imgBox img {
            width: 250px;
            height: 250px;
            margin: 0 auto;
            padding-top: 30px;

        }

        .img1 {
            display: block;
        }

        .img2 {
            display: none;
        }

        .img3 {
            display: none;
        }
        .img4 {
            display: none;
        }
        .img5 {
            display: none;
        }

        .dian {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 200px;
        }

        .xiaodian {
            width: 10px;
            height: 10px;
            background-color: rgb(186, 161, 161);
            border-radius: 50%;
            border: 2px solid black;
            margin: 0 20px;
            cursor: pointer;
        }

        .dian .active{
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="imgBox" onmouseover="stop()" onmouseout="start()">
        <img class="img-slide img1" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01a4ef511318b8d0e7.png" alt="1">
        <img class="img-slide img2" src="http://i2.sanwen.net/doc/1601/675-16012Q55525.png" alt="2">
        <img class="img-slide img3"
            src="http://5b0988e595225.cdn.sohucs.com/images/20180620/b82e95db61bd4a658f25a6c8e3142b7f.jpeg" alt="3">
        <img class="img-slide img4"
            src="http://www.86ps.com/sc/dz/168/1920CAT_008002.jpg" alt="3">
        <img class="img-slide img5"
            src="https://p5.ssl.qhimgs1.com/sdr/400__/t01a033d10bf4623115.jpg" alt="3">
    </div>
    <div class="dian">
        <span class="xiaodian active"></span>
        <span class="xiaodian"></span>
        <span class="xiaodian"></span>
        <span class="xiaodian"></span>
        <span class="xiaodian"></span>
    </div>
</body>
<script type="text/javascript">
    var index = 0;
    var imgBox = document.getElementById(".imgBox")
    var left = document.getElementById(".left")
    var right = document.getElementById(".right")
    var dian = document.querySelectorAll('.dian span')
    function ChangeImg() {
        index++;
        var a = document.getElementsByClassName("img-slide");
        if (index >= a.length) index = 0;
        for (var i = 0; i < a.length; i++) {
            a[i].style.display = 'none';
        }
        a[index].style.display = 'block';
    }
    setInterval(ChangeImg, 100000);
    ChangeImg = setInterval(ChangeImg,1000)
    function stop(){
        clearInterval(ChangeImg)
    }
    function start(){
        ChangeImg = setInterval(ChangeImg,1000)
    }
    imgBox.onmouseover = function(){
        left.style.opacity="1"
        right.style.opacity="1"

    }
</script>

</html>