移动端案例--轮播

最新推荐文章于 2021-06-15 14:18:19 发布

qq_33424234

最新推荐文章于 2021-06-15 14:18:19 发布

阅读量324

点赞数

文章标签：移动框架 javascript

本文链接：https://blog.csdn.net/qq_33424234/article/details/56495019

版权

涉及JS框架:zepto;相当于移动端的jq
			    移动端事件:
				touchstart:手按下去时
				touchmove:开始滑动
				touchend:滑动结束时
	 			js==jq;
				zepto===jq;onclick 移动端会有200-300ms的延时
					touch模块;---移动端的事件
					tap    点击事件
					swipeLeft: 向左滑动
					swipeRight:向右滑动
					swipeUp:    向上滑动
					swipeDown:   向下滑动

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--//出现问题:轮播做好后,在最后一张切换到第一张时,出现延时.解决方法:-->

    <meta name="viewport"content="width=device-width,initial-scale=1.0">
    <style>
        *{margin: 0;padding: 0}
        li{list-style: none}
        a{text-decoration: none}
        body,html{width: 100%;height: 100%;overflow: hidden}
        .banner,.pic{width: 100%;height:200px;overflow: hidden;position: relative;}
        .banner .pic ul{width:1000%;}
        .banner .pic ul li{width: 10%;height: 200px;float: left;}
        .banner .pic ul li:nth-of-type(1){background: rgba(22,255,255,0.5);}
        .banner .pic ul li:nth-of-type(2){background: rgba(225,65,25,0.5);}
        .banner .pic ul li:nth-of-type(3){background: rgba(225,55,255,0.5);}
        .banner .pic ul li:nth-of-type(4){background: rgba(0,255,55,0.5);}
        .banner .pic ul li:nth-of-type(5){background: rgba(225,255,25,0.5);}
        .banner .pic ul li:nth-of-type(6){background: rgba(22,255,255,0.5);}
        .banner .pic ul li:nth-of-type(7){background: rgba(181, 255, 47, 0.5);}
        .banner .pic ul li:nth-of-type(8){background: rgba(22,255,255,0.5);}
        .banner .pic ul li:nth-of-type(9){background: rgba(22,255,255,0.5);}
        .banner .pic ul li:nth-of-type(10){background: rgba(255, 46, 67, 0.5);}


        .nav{position: absolute;right:50px;bottom: 20px; }
        .banner .nav li{float: left;background: rgba(252,25,255,0.1);width: 10px;height: 10px;border-radius: 50%;margin-right: 10px;}
        .banner .nav .active{background: rgba(252,25,255,1)}
    </style>
    <script src="js/zepto.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/fx.js"></script>

    <script>


        $(function () {
            var moveUi=$(".ban")
            var index=0
            var vW=$('body').width();
            var aLi=$(".nav li")
            var timer=null

            //封装一个UL的移动;
            function moveUIRUN() {
                moveUi.animate({'transform':'translate('+index*vW*-1+'px)'});
                if(index>=9){
                    index=0;
                    moveUi.css({'transform':'translate('+index*vW*-1+'px)'});
                }else if(index<=0) {
                    index=9;
                    moveUi.css({'transform':'translate('+index*vW*-1+'px)'});
                }
                //设置nav标注高亮
                aLi.removeClass('active').eq(index).addClass('active');
                if(timer==undefined){
                    timer=setInterval(function () {
                        index++;
                        moveUIRUN()

                    },3000)
                }
            }
            //自动轮播
            timer=setInterval(function () {
                index++;
                moveUIRUN()
            },3000)

            //滑屏切换图片
            moveUi.swipeLeft(function () {
                //先清除定时器
                clearInterval(timer)
                timer=undefined;
                index++;

                moveUIRUN();

            })

            moveUi.swipeRight(function () {
                //先清除定时器
                clearInterval(timer)
                timer=undefined;
                index--;

                moveUIRUN();

            })



        })


    </script>

</head>
<body>
<div class="banner">
    <div class="pic">
        <ul class="ban">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>

    <div class="nav">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>


</div>

</body>
</html>