android 标准轮播图时间手机端轮播图尺寸多少

转载

mob6454cc613c41 2023-06-27 21:04:20

文章标签 android 标准轮播图时间 css js html web app 文章分类 Android 移动开发

html+css 轮播图大小为618*244，只支持触摸图片时滑动，不支持鼠标滑动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *,*::before,*::after{
            padding: 0;
            margin: 0;
            box-sizing:border-box;
            -webkit-box-sizing: border-box;
            /*清除点击高亮效果*/
            tap-highlight-color:transparent;
            -webkit-tap-highlight-color:transparent;
        }
        img{
            vertical-align: bottom;
        }
        body{
            max-width: 640px;
            min-width:320px;
            width:100%;
            margin:0 auto;
            background-color:#f5f5f5;
            font-size:14px;
            color:#333;
            font-family: "Microsotr YaHei", sans-serif;
        }

        ul,ol{
            list-style:none;
        }
        .banner{
            overflow: hidden;
            position: relative;
        }
        .banner ul:first-child{
            transform: translateX(-10%);
            width:1000%;
        }
        .banner ul:first-child li{
            width:10%;
            float: left;
        }
        .banner ul:first-child li img{
            width: 100%;
        }
        .banner ul:last-child {
            position: absolute;
            bottom:10px;
            left:50%;
        margin-left: -70px;
        }
        .banner ul:last-child li{
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border:1px solid #fff;
            margin-right: 10px;
            float: left;
        }
        .banner ul:last-child li.active{
            background-color: #fff;
        }
        .banner ul:last-child li:last-child{
            margin-right: 0;
            
        }
        .clearFl::before,.clearFl::after{
            content:"";
            display: block;
            visibility: hidden;
            height:0;
            line-height: 0;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="banner">
        <ul>
            <li><a href=""><img src="./images/l1.jpg" alt="banner"></a></li>
            <li><a href=""><img src="./images/l2.jpg" alt="banner"></a></li>
            <li><a href=""><img src="./images/l3.jpg" alt="banner"></a></li>
            <li><a href=""><img src="./images/l4.jpg" alt="banner"></a></li>
            <li><a href=""><img src="./images/l5.jpg" alt="banner"></a></li>
            <li><a href=""><img src="./images/l6.jpg" alt="banner"></a></li>
            <li><a href=""><img src="./images/l7.jpg" alt="banner"></a></li>
            <li><a href=""><img src="./images/l8.jpg" alt="banner"></a></li>
        </ul>
        <ul class="point"></ul>
    </div>
    
    <script src="./js/banner.js"></script>
    <script>
        //bannner图片容器，point轮播图上的点容器
        window.onload = function(){
            H5_banner('banner', 'point');
        }
       
    </script>
</body>
</html>

javaScript

function H5_banner(eleClass, pointClass){
    //获取bannner容器宽度
    var banner = document.querySelector("." + eleClass);
    var bannerWidth = banner.offsetWidth;

    //获取图片容器宽度
    var imgBox = banner.querySelector("ul:first-child");
    var imgBoxWidth = imgBox.offsetWidth;
    
    //获取轮播图小点的容器
    var pointBox = document.querySelector("." + pointClass);
   
    //获取图片数量
    var bannerBox = banner.querySelector('ul');
    var imgNum = bannerBox.querySelectorAll("li").length;


    //根据图片个数，设置小点的个数
     var bannerPoint = addPoint(pointBox, imgNum);
    //获取轮播所有的点元素
    //var bannerPoint = banner.querySelector("ul:last-child");
    var pointList = bannerPoint.querySelectorAll("li");


    //克隆第一个和最后一个图片
    cloneItem(banner);

    /*开始轮播 */
    var index = 1; //当前是第几个图片
    var timer = setInterval(function(){
        index ++;
        //给图片添加过渡效果
        addTransition(imgBox);
        //移动图片容器
        moveImgBox(imgBox, -index * bannerWidth);
        return index;
    }, 1000);

    //过渡动画结束后触发
    imgBox.addEventListener("transitionend", function (){
        if(index >= imgNum + 1){  //到达图片列表末尾时，重新回到开头，实现无缝过渡
            index = 1;
            //清除过度效果  达到瞬间移动实现无缝滚动的目的
            clearTransition(imgBox);
            moveImgBox(imgBox, -index * bannerWidth);
        }else if(index <= 0){        //当用户右滑动时，将图片定位到末尾，实现无缝过渡
            index = imgNum;
             //清除过度效果  达到瞬间移动实现无缝滚动的目的
             clearTransition(imgBox);
             moveImgBox(imgBox, -index * bannerWidth);
        }
         //过渡效果结束后，设置轮播图点的样式
        setProint(index, pointList);
    });
    //滑动轮播图效果实现
    var startX = 0; //存储滑动开始时x轴的位置
    var distanceX = 0; //存储滑动的举例
    var isMove = false;//只有当移动确实发生时触发

    //点触开始触发的方法
    imgBox.addEventListener('touchstart',function(e){
        //清除计时器,以免影响操作
        clearInterval(timer);
        //获取第一个触摸点的x轴坐标
        startX = e.touches[0].clientX;
        return startX;
    });

    //点触点移动时触发的方法
    imgBox.addEventListener('touchmove', function(e){
        //计算移动时的距离，使图片也同样移动该距离位置
        var moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
        //清除图片的过渡效果，否则会有0.2s的延后
        clearTransition(imgBox);
        //移动图片
        moveImgBox(imgBox, -index * bannerWidth + distanceX);
        //将判断设为true
        isMove = true;
    });

    //点触点结束时触发的方法
    imgBox.addEventListener('touchend',function(e){
        if(isMove){
             //滑动图片大于窗口大小的1/3时，则切换为上一张或者下一张图片，否则返回到原来的位置
            if(Math.abs(distanceX) < bannerWidth/3){
                //添加过渡效果
                addTransition(imgBox)
                //返回原来的位置
                moveImgBox(imgBox, -index * bannerWidth);
            }else{
                if(distanceX > 0){ //上一张图片
                    index--;
                }else{  //下一张图片
                    index++;
                }
                addTransition(imgBox)
                moveImgBox(imgBox, -index * bannerWidth);
            }
        }
        //重置所有变量
        startX = 0; //存储滑动开始时x轴的位置
        distanceX = 0; //存储滑动的举例
        isMove = false;//只有当移动确实发生时触发
       
        //移动结束，继续轮播
        timer = setInterval(function(){
            index ++;
            //给图片添加过渡效果
            addTransition(imgBox);
            //移动图片容器
            moveImgBox(imgBox, -index * bannerWidth);
            return index;
        }, 1000);
    });
}


//添加轮播图的第一个和最后一个
function cloneItem(ele){
    //获取图片所在的容器
    var banner_box = ele.querySelector('ul');
    var firstChild = banner_box.querySelector('li:first-child').cloneNode(true);
    var lastChild = banner_box.querySelector('li:last-child').cloneNode(true);
    banner_box.prepend(lastChild);
    banner_box.append(firstChild);
}

//添加轮播图的小点
function addPoint( pointBox, imgNum){   
    for(var i = 0; i < imgNum; i++){
        var li = document.createElement("li");
        pointBox.appendChild(li);
    }
    var first_li = pointBox.querySelector("li:first-child");
    first_li.classList.add("active");
    return pointBox;
}


//添加过渡动画
function addTransition(imgBox){
    imgBox.style.transition = 'all 0.2s';
    imgBox.style.webkitTransition = 'all 0.2s';
}
//清除过渡动画
function clearTransition(imgBox){
    imgBox.style.transition = 'none';
    imgBox.style.webkitTransition = 'none';
}

//移动图片容器
//distance：移动的距离
function moveImgBox (imgBox, distance){
    imgBox.style.transform = "translateX("+distance+"px)";
    imgBox.style.webkitTransform = "translateX("+distance+"px)";
}

//设置轮播点样式
function setProint(index, pointList){
    /*index的取值范围为 1-imgNum */
    for(var i = 0; i < pointList.length; i++){
        pointList[i].classList.remove("active");
    }
    pointList[index - 1].classList.add("active");
    
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。