普通轮播图

最新推荐文章于 2024-08-31 14:34:18 发布

优雅的大白鹅

最新推荐文章于 2024-08-31 14:34:18 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/weixin_48186771/article/details/109071749

版权

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #mlBox{
            width: 870px;
            height: 500px;
            position: relative;
            margin: 50px auto;
            border: 1px #ececec solid;
        }
        #mlImg{
            width: 870px;
            height: 500px;
        }
        #mlImg img{
            width: 100%;
            height: 100%;
            display: none;
        }

        .line{
            width: 100%;
            height: 45px;
            font-weight: bold;
            color: #f9f9f9;
            line-height: 45px;   
            background-color:rgba(0,0,0,.5) ;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;  
        }
        .line-title{
            height: 35px;
            margin-top: 10px;
        }
        #mlSpan{
            width: auto;
            height: 10px;
            position: absolute;
            left: 50%;
            bottom: 34px;
        }
        #mlSpan span{
            display: block;
            float: left;
            width: 10px;
            height: 10px;
            background:#eee;
            opacity: .5;
            border-radius: 50%;
            margin: 0 3px;
            z-index: 100;
            cursor: pointer;
        }
        #mlImg #mlShow{
            display: block;
        }
        #mlSpan #mlOn{
            background:#fff;
            opacity: 1;
        }
        #mlLeft,#mlRight{
            width: 50px;
            height: 80px;
            text-align: center;
            background: rgba(51,51,51,0.5);
            display: none;
            cursor: pointer;
        }
       
        #mlLeft{
            position: absolute;
            left: 0;
            top: 50%;
        }
        #mlRight{
            position: absolute;
            right: 0;
            top: 50%;
        }
        #mlLeft img, #mlRight img{
            width: 50px;
            height: 80px;
            display: block;
            opacity: .7;
        }
</style>
</head>
<body>
    <div id="mlBox">
        <div id="mlImg">
            <img src="../img/5645dfa8541d81dc2d6a93243027ac1.jpg" alt="" id="mlShow">
            <img src="../img/62d276219e7294e4cb05f5df45f3329.jpg" alt="">
            <img src="../img/8fe5417c5ba76f5ae2c7e3eb2a92ddd.jpg" alt="">
        </div>
        <div class="line">
            <p id="mlSpan">
                <span id="mlOn"></span>
                <span></span>
                <span></span>
            </p>
            <h2 class="line-title">优雅的大白鹅</h2>
        </div>
       
        <div id="mlLeft">
            <img src="./prev1.png" alt="">
        </div>
        <div id="mlRight">
            <img src="./next1.png" alt="">
        </div>
    </div>

    <script>
        ml(true);  //调用ml函数  注:传参是否需要左右指示  默认false
        function ml(indicator) {
            var oMlBox = document.getElementById('mlBox');  //获取id:mlBox
            var oMlImg = document.getElementById('mlImg');  //获取id:mlImg
            var oMlSpan = document.getElementById('mlSpan');  //获取id:mlSpan
            var aSpan = oMlSpan.getElementsByTagName('span');  //获取id:mlSpan里面的span标签
            var aImg = oMlImg.getElementsByTagName('img');  //获取id:mlImg里面的img标签
            var oMlLeft = document.getElementById('mlLeft');  //获取id:mlLeft
            var oMlRight = document.getElementById('mlRight');  //获取id:mlRight
            var u = 0;  //当前照片位置
            var shut = null;  //定时器的名字
            function f1() {
                for (var i = 0; i < aSpan.length; i++) {  //循环id:mlSpan里面的span标签
                    aSpan[i].id = '';  //让span标签的id等于空
                    aImg[i].id = '';  //让id:mlImg里面img标签id等空
                }
                aSpan[u].id = 'mlOn';  //当前位置的span标签id等于mlOn
                aImg[u].id = 'mlShow';  //当前位置的img标签id等于mlShow
            }
            for (var f = 0; f < aSpan.length; f++) {  //循环id:mlSpan里面的span标签
                aSpan[f].index = f;  //span标签第f个的index等于f
                aSpan[f].onclick = function () {  //点击span标签  注:照片下面的三个点
                    u = this.index;  //当前位置等于当前span标签index的位置
                    f1();  //调用f1函数
                }
            }
            oMlBox.onmousemove = function () {  //鼠标悬浮id:mlBox
                clearInterval(shut);  //关闭定时器
                if (indicator) {  //是否显示左右指示  注:调用ml函数传参
                    oMlLeft.style.display = 'block';  //显示左指示
                    oMlRight.style.display = 'block';  //显示右指示
                    oMlRight.onclick = function () {  //点击右指示
                        u++;  //当前位置加一
                        if (u >= aImg.length) {  //当前位置大于照片的数量就等于0
                            u = 0;
                        }
                        f1();  //调用f1函数
                    };
                    oMlLeft.onclick = function () {  //点击左指示
                        u--;  //当前位置减一
                        if (u < 0) {  //当前位置小于0时就让当前位置等于照片数量减一
                            u = aImg.length - 1;  //注:因为计算机从零开始数所以要减一
                        }
                        f1();  //调用f1函数
                    };
                }else{
                    oMlLeft.style.display = 'none';  //左指示消失
                    oMlRight.style.display = 'none';  //右指示消失
                }
            };
            oMlBox.onmouseout = function () {  //当鼠标移出id:mlBox
                f2();  //调用f2函数
                oMlLeft.style.display = 'none';  //左指示消失
                oMlRight.style.display = 'none';  //右指示消失
            };
            function f2(){
                shut = setInterval(function () {  //定时器
                    u++;  //每3秒当前位置加一
                    if (u >= aImg.length) {  //当前位置大于等于照片的数量当前位置等于0
                        u = 0;
                    }
                    f1();  //调用f1函数
                },3000);
            }
            f2();  //调用f2函数
        }
    </script>
</body>
</html>

在这里插入图片描述

优雅的大白鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
普通轮播图

效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ .
复制链接

扫一扫