webApp 之轮播图案例_web实现轮播图-CSDN博客

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/86308758

本文介绍了webApp中实现轮播图的一种方法，通过改变ul的left值来平移图片。虽然这种方式性能较差且费电，但提到了几个关键点：1) ul需定位；2) li标签需浮动，img转为块元素以消除缝隙；3) 注意定位可能导致父元素高度变为0，影响显示效果。

摘要由CSDN通过智能技术生成

下面这个方式是改变ul的left值进行改变图片的平移的，这个中方式不建议使用，比较好性能，费电；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            overflow: hidden;
        }

        #test {
            position: absolute;
            width: 100%;
        }

        #test ul {
            position: absolute;
        }

        #test .points-wrap {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }

        #test .points-wrap span {
            width: 10px;
            height: 10px;
            background: green;
            display: inline-block;
            border-radius: 50%;
            margin: 0 3px;
        }

        #test > .points-wrap > span.active {
            background: deeppink;
        }
    </style>
</head>
<body>
<div>
    <div id="test" class="carousel-wrap">
    </div>

</div>


<script type="text/javascript">
    window.onload = function () {
        //禁止所有的事件；
        document.addEventListener("touchstart", function (even) {
            even = even || event;
            even.preventDefault();
        });

        let strs = ["img/01.jpg", "img/02.jpg", "img/03.jpg", "img/04.jpg", "img/05.jpg"];

        function carousel(strs) {
            let div_carousel = document.querySelector(".carousel-wrap");
            if (div_carousel) {
                //创建ul，并给ul中添加li、a、img；
                let ul_element = document.createElement("ul");
                for (let i = 0; i < strs.length; i++) {
                    ul_element.innerHTML += "<li><a href='javascript:;'><img src=" + strs[i] + "/></a></li>";
                }
                //将ul添加到div中去；
                div_carousel.appendChild(ul_element);

                //创建style样式标签
                var styleNode = document.createElement("style");
                styleNode.innerHTML = ".carousel-wrap > ul > li{width: " + (1 / strs.length * 100) + "%;float: left;}" +
                    ".carousel-wrap > ul{width: " + strs.length + "00%;overflow: hidden;}" +
                    ".carousel-wrap > ul >li >a>img{width: 100%;display: block;}";
                //添加style标签到head中去；
                document.head.appendChild(styleNode);
                //因为给ul设置了定位，所有他的父亲 div 的高度就成0了，这里延迟100毫秒等img渲染完成后获取img的高度，设置给div；
                var imgNodes = document.querySelector(".carousel-wrap > ul > li > a >img");
                setTimeout(function () {
                    div_carousel.style.height = imgNodes.offsetHeight + "px";
                }, 200);

                //创建points的盒子，并添加span标签，设置圆角背景形成小圆点；
                let htmlElement = document.createElement('div');
                htmlElement.classList.add("points-wrap");
                div_carousel.appendChild(htmlElement);
                let div_points_element = document.querySelector(".carousel-wrap .points-wrap");
                let pointsSpan = null;
                if (div_points_element) {
                    for (let i = 0; i < strs.length; i++) {
                        if (i == 0) {
                            div_points_element.innerHTML += '<span class="active"></span>';
                        } else {
                            div_points_element.innerHTML += '<span></span>';
                        }
                    }
                    pointsSpan = document.querySelectorAll(".carousel-wrap > .points-wrap > span");
                }


                //手指一开始的位置
                var startX = 0;
                //元素一开始的位置
                var elementX = 0;
                let index = 0;
                let disX = 0;
                div_carousel.addEventListener("touchstart", function (ev) {
                    ev = ev || event;
                    var TouchC = ev.changedTouches[0];
                    ul_element.style.transition = "none";
                    startX = TouchC.clientX;
                    //获取ul距离父的左边距；
                    elementX = ul_element.offsetLeft;
                })
                div_carousel.addEventListener("touchmove", function (ev) {
                    ev = ev || event;
                    let changedTouch = ev.changedTouches[0];
                    //获取x轴的坐标；相对于浏览器页面（或客户区）的水平坐标
                    let nowX = changedTouch.clientX;
                    disX = nowX - startX;
                    ul_element.style.left = elementX + disX + "px";
                });

                div_carousel.addEventListener("touchend", function (ev) {
                    //index抽象了ul的实时位置，计算当前的滑动的位置；
                    //超出控制，通过left除以完美宽度得到index；
                    let offsetLeft = ul_element.offsetLeft;
                    if (offsetLeft > 0) {
                        index = 0;
                    } else if (offsetLeft < -((strs.length-1) * document.documentElement.clientWidth)) {
                        index = -(strs.length-1);
                    }else{
                        index = offsetLeft / document.documentElement.clientWidth;
                        index = Math.round(index);
                    }
                    //设置left的动画
                    ul_element.style.transition = ".5s left";
                    ul_element.style.left = index * (document.documentElement.clientWidth) + "px";
                    //设置points的ui；
                    for (let i = 0; (pointsSpan != null && i < pointsSpan.length); i++) {
                        pointsSpan[i].classList.remove("active");
                    }
                    pointsSpan[Math.abs(index)].classList.add("active");
                })
            }
        }

        carousel(strs);
    };
</script>
</body>
</html>

总结：

1.以为要改变ul标签的left值进行平移图片，所以ul要使用定位；

2.对li标签要使用浮动，img标签是行内块元素，之间会有缝隙，要转换成块元素；

3.定位会不占位置，父标签的高度会发生改变，可能为0，如果为0就无法显示效果了，要注意这点；