原生JS写轮播图

最新推荐文章于 2024-06-17 15:29:34 发布
ʚ浅初.ɞ
最新推荐文章于 2024-06-17 15:29:34 发布
阅读量207
点赞数
分类专栏： javascript 文章标签： javascript css html
本文链接：https://blog.csdn.net/qq_61195495/article/details/125322418
版权
javascript 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
<!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>轮播图</title>
    <style type="text/css">
    /* 设置全局变量取消所有标签的内外边距 */
    *{
        margin: 0px;
        padding: 0px;
        /* 取消小圆点 */
        list-style: none;
    }
    /* 设置轮播图的大小位置 */
    #lunbo{
        width: 560px;
        height: 300px;
        /* 水平居中 */
        margin: 100px auto;
        /* border: 1px solid red;  */
        /* 设置定位 */
        position: relative;
    }
    #lunbo #tupianul li{
        display: none;
    }
    /* class为cur的li标签显示 */
    #lunbo #tupianul li.cur{
        display: block;
    }
    /* 第2步，按钮的显示 */
    #lunbo #leftBtn{
        width: 45px;
        height: 45px;
        /* border: 1px solid red; */
        background: url(./图片轮播/images/png24.png) 0px 0px no-repeat;
        /* 设置绝对定位 */
        position: absolute;
        left: 10px;
        top: 130px;
        /* 设置小手 */
        cursor: pointer;
    }
    #lunbo #rightBtn{
        width: 45px;
        height: 45px;
        /* border: 1px solid red; */
        background: url(./图片轮播/images/png24.png) 0px -46px no-repeat;
        position: absolute;
        right: 10px;
        top: 130px;
        /* 设置小手 */
        cursor: pointer;
    }
    /* 第3步，黑框的显示 */
    #lunbo .heikuang{
        width: 100%;
        height: 40px;
        background: url(./图片轮播/images/hei.png);
        position: absolute;
        left: 0px;
        bottom: 0px;
    }
    #lunbo #biaoti{
        color: white;
        font-size: 18px;
        padding-left: 20px;
        font-family: "宋体","微软雅黑";
        /* 设置垂直居中 */
        line-height: 40px;
        float: left;
    }
    /* 设置圆点的ul位置 */
        #lunbo #cirul{
        /* border: 1px solid red; */
        /* background-color: white; */
        width: 142px;
        height: 14px;
        float: right;
        margin-top: 14px;
        margin-right: 10px;
        cursor: pointer;
    }
    #lunbo #cirul li{
        width: 14px;
        height: 14px;
        background: url(./图片轮播/images/png24.png) -23px -125px no-repeat;
        float: left;
        margin-left: 14px;
        }
        /* 设置大圆点 */
        #lunbo #cirul li.cur{
            background-position: -9px -125px;
        }
    </style>
    
</head>
<body>
    <div id="lunbo">
        <div class="tupian">
            <ul id="tupianul">
                <li class="cur"><a href="#"><img src="./图片轮播/images/0.jpg" alt="狮子"></a></li>
                <li><a href="#"><img src="./图片轮播/images/1.jpg" alt="外滩真好看！"></a></li>
                <li><a href="#"><img src="./图片轮播/images/2.jpg" alt="湖水"></a></li>
                <li><a href="#"><img src="./图片轮播/images/3.jpg" alt="印度"></a></li>
                <li><a href="#"><img src="./图片轮播/images/4.jpg" alt="山羊"></a></li>
            </ul>
        </div>
        <div class="anniu"></div>
            <div id="leftBtn" onclick="upImg()"></div>
            <div id="rightBtn" onclick="dong()"></div>
        <div class="heikuang">
            <h3 id="biaoti">我是标签</h3>
            <ul id="cirul">
                <li></li>
                <li class="cur"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        // 页面加载完成后，执行轮播图
        // window.onload = function(){
        //     轮播图的js代码
        // }
        // 获取变量
        var lunbo = document.getElementById("lunbo");//获取id为轮播的div标签
        var tupianul = document.getElementById("tupianul");//获取ul标签
        var tupianulli = tupianul.getElementsByTagName("li");//获取li标签
        var dianLis = document.getElementById("cirul").getElementsByTagName("li");//获取小圆点的li标签
        var tupians = tupianul.getElementsByTagName("img");//从id为图片ul的白哦前对象中，获取所有的图片
        var biaoti = document.getElementById("biaoti");//获取id = biaoti的div标签
        var myTimer = 0;//我的计时器
        var nowingLi = 0;//第几个li标签  
        // 设置自动轮播,每隔1s让图片换一张
        myTimer = window.setInterval(dong,1000);
        //函数功能:实现了图片的切换，小圆点的切换，切换到下一张图片
        function dong(){
            //显示下一个
            if(nowingLi==tupianulli.length-1){
                nowingLi = 0;
            }else{
                //如果不是最后一个，显示下一个
                nowingLi++;
            }
            huanAll();//换图、换小圆点、字的功能封装
        }
    //id为lunbo的标签设置鼠标悬停事件,清空计时器--时间间隔函数
    lunbo.onmouseover = function(){
        window.clearInterval(myTimer);//清空计时器
    }
    //id为lunbo的div标签设置鼠标离开事件，开始计时器--时间间隔函数
    lunbo.onmouseout = function(){
        //设置自动轮播，每隔1s让图片换一张
        myTimer = window.setInterval(dong,1000);
    }
    //点击左侧按钮，显示上一张图片，调用upImg函数
    function upImg(){
        //显示上一张图片
        if(nowingLi==0){//如果是第一张图片则显示最后一张图片
            nowingLi = tupianulli.length-1
        }else{//如果不是第一张图片则显示上一张图片
            nowingLi = nowingLi - 1;
        }
        huanAll();//换图、换小圆点、字的功能封装
    } 
       //换图、换小圆点、字的功能封装
       function huanAll(){
           for(let i=0;i<tupianulli.length;i++ ){
            tupianulli[i].className = "";
            dianLis[i].className = "";
           }
           //再显示当前的图片li，小圆点li
           tupianulli[nowingLi].className = "cur";
            dianLis[nowingLi].className = "cur";
            //显示图片标题，获取当前显示图片的alt属性，然后把alt属性的值，赋值给id=biaoti的div标签innerHtml---第2件事情，图片上的字显示
            biaoti.innerHTML = tupians[nowingLi].alt;
       }
        </script>
</body>
</html>
效果图：