当前位置：网站首页>详解轮播图二-通过left定位来轮播图片

详解轮播图二-通过left定位来轮播图片

2022-08-08 11:53:00 【勇敢*牛牛】

详解轮播图二

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


<!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>Document</title>
        <style>
          body{
            margin: 0;
            padding: 0;
        }
        .carousel{
            width: 100%;
            height: 33.3vw;
            position: relative;
            left: 0;
            top: 0;
            font-size: 0;
            min-width: 1000px;
            overflow: hidden;
        }
        .carousel>.img-con{
            width: 500%;
            height: 100%;
            position: absolute;
            transition:  all 0.5s;
            left: 0;
        }
        .carousel .img-block{
            width: 20%;
            height: 100%;
            position: relative;
            float: left;
            
        }
        .carousel .img-block>img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        .carousel .img-block>div{
            position: absolute;
            left:10vw;
            top: 2vw;
            font-size: 20px;
            color: white;
        }
        .carousel .img-block>div>span>i{
            font-style:normal;
            font-size: 28px;
        }
        .carousel .img-block>div>h1{
            font-size: 20px;
        }
        .clear::after
        {
            content: "";
            display: block;
            visibility: hidden;
            height: 0;
            overflow: hidden;
            clear: both;
        }

        ul{
            list-style: none;
            position: absolute;
            bottom: 3vw;
            left: 50%;
            transform: translate(-50%,0);
        }
        ul li{
            width: 1.6vw;
            height: 1.6vw;
            border:2px solid red;
            margin-left: 1.3vw;
            float: left;
            border-radius: 1.6vw;
            
        }
        .left,.right{
            position: absolute;
            top: 50%;
            transform: translate(0,-50%);
        }
        .left{
            left: 3vw;
        }

        .right{
            right: 3vw;
        }
    </style>
</head>
<body>
       <div class="carousel">
        <div class="img-con clear">
            <div class="img-block" id="a">
                <img src="./img/a.jpg">
                <div>
                    <span><i>28</i>/Jul.2022</span>
                    <h1>与父母的47天自驾游｜向疆而行2万里，我们依旧是过客</h1>
                </div>
               
            </div>
            <div class="img-block" id="b">
                <img src="./img/b.jpg">
                <div>
                    <span><i>27</i>/Jul.2022</span>
                    <h1>自驾川西小环线，在千碉之国遇见梨花如雪的季节</h1>
                </div>

            </div>
            <div class="img-block" id="c">
                <img src="./img/c.jpg">
                <div>
                    <span><i>26</i>/Jul.2022</span>
                    <h1>被误解的沙县，原来有这么多美食只有在当地才能吃到！</h1>
                </div>

            </div>
            <div class="img-block" id="d">
                <img src="./img/d.jpg">
                <div>
                    <span><i>25</i>/Jul.2022</span>
                    <h1>周末出逃计划 | 打卡美丽中国</h1>
                </div>

            </div>
            <div class="img-block" id="e">
                <img src="./img/e.jpg">
                <div>
                    <span><i>24</i>/Jul.2022</span>
                    <h1>寻迹山川湖海，邂逅云南的冬与夏</h1>
                </div>

            </div>
        </div>
        <ul class="clear">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <img src="./img/left.png" class="left">
        <img src="./img/right.png" class="right">
    </div>
    <script>
        var imgCon,left,right,dot;
        var pos = 0;//定位图片的索引
        var prev;
        init();
        function init(){
            imgCon = document.querySelector('.img-con');
            left = document.querySelector('.left');
            right = document.querySelector('.right');
            dot = document.querySelector('ul');
            /* 给lu,left,right添加点击事件 */
            dot.addEventListener('click',dotClickHandler);
            left.addEventListener('click',bnClickHandler);
            right.addEventListener('click',bnClickHandler);

        }
        /* ul的点击事件 */
        function dotClickHandler(e){
            if(e.target.nodeName !== "LI") return ;
            /* 获取被点击的li位置 */
            pos = Array.from(this.children).indexOf(e.target);
            imgConMove()
            changePrev()
        }
        /* 左右按钮的点击事件 */
        function bnClickHandler(e){
            /* 如果被点击左边执行 */
            if(this ===  left){
                /* 第一次点击之后pos==4 */
                if(--pos<0) pos = 4
            }else{
                if(++pos>4) pos = 0
            }
            imgConMove();
            changePrev()

        }
        /* 如果点击左边移动的是这个imgConleft的倍数 */
        function imgConMove(){
            /* imgCon.firstElementChild.offsetWidth 一个图片的宽度 */
            imgCon.style.left = pos * -imgCon.firstElementChild.offsetWidth + 'px';
            console.log(pos * -imgCon.firstElementChild.offsetWidth);
        }

        function changePrev(){
            if(prev){
                prev.style.backgroundColor = 'transparent'
            }
            prev = dot.children[pos];
            prev.style.backgroundColor = 'red'
        }
    </script>
</body>
</html>
原网站

版权声明
本文为[勇敢*牛牛]所创，转载请带上原文链接，感谢
https://niuniu.blog.csdn.net/article/details/126065166

边栏推荐

猜你喜欢

随机推荐