轮播图

轮播图样式案例

<!DOCTYPE html>
<html lang="ch-zn">
<head>
    <meta charset="UTF-8">
    <title>moban</title>

    <style>
    html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    caption,th{text-align:left;font-weight:normal;}
    html,body,fieldset,img,iframe,abbr{border:0;}
    i,cite,em,var,address,dfn{font-style:normal;}
    [hidefocus],summary{outline:0;}
    li{list-style:none;}
    h1,h2,h3,h4,h5,h6,small{font-size:100%;}
    sup,sub{font-size:83%;}
    
    #banner{
        width: 820px;
        height: 380px;
        margin: 100px auto;
        overflow: hidden;
    }
    #banner ul.tp{
        width: 1000%;
        height: 340px;
        transition: all .5s;
    }
    #banner ul.tp li{
        float: left;
        width:820px;
        height: 340px;
    }
    #banner ul.tp a{
        display: block;
        width: 100%;
        height: 100%;
    }
    #banner ul.tp a li img{
        display: block;
        width: 820px;
        height: 340px;
    }
    #banner ul.title{
        display: flex;
        width: 100%;
        height: 40px;
    }
    #banner ul.title li{
        flex-direction:row-reverse;
        width: 100%;
        height: 38px;
        background-color: rgb(227,226,226);
        border-bottom: 2px solid rgb(227,226,226);
        font-size: 12px;
        line-height:38px;
        text-align: center;
        /* 无法被选中 */
        user-select: none;
        /* 鼠标变手指状态 */
        cursor: pointer;
    }
    #banner ul.title li.activ{
        background-color: rgb(247,246,246);
        border-bottom: 2px solid #cea861;
        color: #cea861;
    }

    </style>

</head>
<body>

    <div id="banner">
        <ul class="tp">
            <li><a href=""><img src="./img/6.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/7.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/8.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/9.png" alt=""></a></li>
            <li><a href=""><img src="./img/10.jpg" alt=""></a></li>
        </ul>
        <ul class="title">
            <li class="activ">2021 臻心之礼</li>
            <li>至臻终章2020</li>
            <li>2021新赛季 新征程</li>
            <li>管盟有礼</li>
            <li>转区服务限时半价</li>
        </ul>
    </div>



    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
    <script>

        /* 轮播图*/ 
        (function () {
                //获取tp标签权限
            let atp = document.querySelector("#banner ul.tp"),
                //获取title下li的标签权限
                atitle = document.querySelectorAll("#banner ul.title li"),
                //获title的length
                lentp = atitle.length,
                //定义初始状态
                index = 0

            for (let i = 0; i < lentp; i++) {
               //title的移入事件函数
                atitle[i].onmouseenter = function (){
                    //tp图片跟随i的变化,不断marginleft改变
                    atp.style.marginLeft = i*-820 + "px";
                    //title初始状态清楚
                    atitle[index].classList.remove("activ");
                    //初始状态跟随i变化
                    index = i;
                    //强制通过for循环清楚li的名字
                    /* for (let j = 0; j < lentp; j++) {
                       atitle[j].classList.remove("activ")
                    }; */
                    //重新给title下选中的li添加名字
                    this.classList.add("activ")
               }
            };



        })();

    </script>
</body>
<!--
笔记区域




-->

</html>

posted @ 2021-01-13 03:43  小衣  阅读(132)  评论(0)    收藏  举报