js之制作轮播图

最新推荐文章于 2024-05-01 22:25:44 发布
编程小小小小小白白
最新推荐文章于 2024-05-01 22:25:44 发布
阅读量142
点赞数
文章标签： javascript css html
本文链接：https://blog.csdn.net/m0_67932301/article/details/124623130
版权
我们想要做轮播图，首先将他的布局写好，再写他的逻辑
步骤和代码在下面的代码段中
<!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>lol</title>
    <style>
        /* 清除网页的默认间距 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 通过class找到对应的标签 .+class名称 */
        .banner{
            width: 820px;
            height: 380px;
            background-color: blue;
        }
        .banner_img{
            width: 820px;
            height: 340px;
            background-color: red;
            /* 超出隐藏属性 */
            overflow: hidden;
        }
        .banner_img ul{
            width: 4100px;
            /* 过渡动画 */
            transition: all 0.2s;
        }
        .banner_img li{
            width: 820px;
            height: 340px;
            float: left;
             /* 清除li前面的列表符号 */
             list-style: none;
        }
        .banner_nav{
            width: 820px;
            height: 40px;
            background-color: green;
        }
        /* 后代选择器，先找容器，再找内部标签 */
        .banner_nav li{
            width: 164px;
            height: 40px;
            /* 由于li在网页中属于块元素，独立成行 */
            /* 浮动属性，让原本上下排列的li，并排 */
            float: left; 
            /* 清除li前面的列表符号 */
            list-style: none;
            /* 字号是14px */
            font-size: 12px;
            /* 文本的水平居中 */
            text-align: center;
            /* 文本垂直居中 单行文本垂直居中，当行高等于当前容器的高度时内部文字垂直居中 */
            line-height:40px;
            /* 设置背景颜色 */
            background-color: #e3e2e2;
        }
        .banner_nav .active{
            background-color: white;
            color: #ab8e66;
            /* 边框会增加元素的实际占位 */
            border-bottom: 2px solid #cea861;
            height: 38px;
        }
    </style>
</head>
<body>
    <!-- 创建一个div标签，用于编写整个轮播图结构 ，命名banner -->
    <div class="banner">
        <!-- 根据banner中内容，划分成 img区域，以及导航区域，区域 div -->
        <div class="banner_img">
            <!-- banner_img 轮播图区域显示窗口，只显示一张图片 -->
            <!-- 滚动式轮播图，将图片并排显示 
            并列结构  无序列表 ul>li-->
            <!-- 需要给容器Ul添加宽度，可以盛放五个元素并排显示 -->
            <ul id="imgWrap">
                <li>
                    <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220428/beaa2ebcdb1a4bbf808ee901fc80032c.jpeg" alt="">
                </li>
                <li>
                    <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220429/840a729aaa5ec2f2feae2dff77ce4de1.jpeg" alt="">
                </li>
                <li>
                    <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220501/9a54727c3813655e114d86f331d51615.jpeg" alt="">
                </li>
                <li>
                    <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220502/bd2047b6ba18ee1bdad69ef227f29557.jpeg" alt="">
                </li>
                <li>
                    <img src="https://ossweb-img.qq.com/upload/adw/image/977/20220430/20a9bfd7cd36b2a0f0ec0130cddc52fe.png" alt="">
                </li>
            </ul>
          
        </div>
        <div class="banner_nav">
            <!-- 网页还原过程中，如果需要编写对应的并列结构，直接使用无序列表进行开发 ul>li -->
            <!-- 设置每一个li的大小 -->
            <ul>
                <li class="active" id="li1">EDG冠军战队皮肤预售 </li>
                <li id="li2">精选皮肤限时五折</li>
                <li id="li3">EDG冠军皮肤预售直播</li>
                <li id="li4">杰作宝箱里程碑上线</li>
                <li id="li5">开启你的赏金之旅</li>
            </ul>
        </div>
    </div>
    <script>
        //js事件编程：1.事件源 2.事件 3.事件处理函数
        //事件源：五个li
        //事件：鼠标进入事件 onmouseenter
        //数据处理函数：对应的li标签添加上选中样式，图片滚动到指定区域
        //通过id找到对应的元素
        //找到五个事件源
        var li1=document.getElementById("li1")
        var li2=document.getElementById("li2")
        var li3=document.getElementById("li3")
        var li4=document.getElementById("li4")
        var li5=document.getElementById("li5")
        var imgWrap=document.getElementById("imgWrap") //找到当前需要移动的 ul标签
        //当鼠标进入第一个li
        li1.onmouseenter=function(){
            // console.log(1)
            // 需要给自己添加上选中的样式， class=active
            //js中如何设置类名
            li1.className="active"
            //将除了自己以外所有li的选中样式 全部清除
            li2.className=""
            li3.className=""
            li4.className=""
            li5.className=""
            //当鼠标进入第一个li时，ul的margin-left 为0
            //设置指定标签的 样式
            imgWrap.style.marginLeft="0px"

        }

        //当鼠标进入 第二个li时
        li2.onmouseenter=function(){
            // console.log(1)
            // 需要给自己添加上选中的样式， class=active
            //js中如何设置类名
            li2.className="active"
            //将除了自己以外所有li的选中样式 全部清除
            li1.className=""
            li3.className=""
            li4.className=""
            li5.className=""
            //当鼠标进入第一个li时，ul的margin-left 为-820px 
            imgWrap.style.marginLeft="-820px"
        }
        li3.onmouseenter=function(){
            // console.log(1)
            // 需要给自己添加上选中的样式， class=active
            //js中如何设置类名
            li3.className="active"
            //将除了自己以外所有li的选中样式 全部清除
            li1.className=""
            li2.className=""
            li4.className=""
            li5.className=""
            imgWrap.style.marginLeft="-1640px"
        }
        li4.onmouseenter=function(){
            // console.log(1)
            // 需要给自己添加上选中的样式， class=active
            //js中如何设置类名
            li4.className="active"
            //将除了自己以外所有li的选中样式 全部清除
            li1.className=""
            li3.className=""
            li2.className=""
            li5.className=""
            imgWrap.style.marginLeft="-2460px"
        }
        li5.onmouseenter=function(){
            // console.log(1)
            // 需要给自己添加上选中的样式， class=active
            //js中如何设置类名
            li5.className="active"
            //将除了自己以外所有li的选中样式 全部清除
            li1.className=""
            li3.className=""
            li4.className=""
            li2.className=""
            imgWrap.style.marginLeft="-3280px"
        }
    </script>
</body>
</html>