多行触屏滑动轮播

Posted hawtree

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多行触屏滑动轮播相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <title>多行轮播</title>
    <style>
        a{-webkit-tap-highlight-color: transparent;}
        *{margin: 0;padding: 0;}
        body{background: green;text-align: center}
        #wrap{overflow: hidden;margin: 0.1rem auto;width: 6.4rem;}
        #list{list-style: none;width: 100rem;overflow: hidden;font-size: 0;position: relative;left: 0;}
        #list li{float: left; width: 3.1rem;margin-right: 0.2rem;}
        #list li>div{margin-bottom: 0.2rem;}
        #list img{max-width: 100%;}
        #go-left,#go-right{
            width: 0.4rem;height: 1.3rem;position: absolute;
            background-repeat: no-repeat;
            background-size: 100%;
            top:1.5rem;
        }
        #go-left{
            background-image: url(http://img.37wan.cn/huodong/qgjmh-yhjy-20170407/images/wap-l.png);
        left: 0.1rem;
        }
        #go-right{
            background-image: url(http://img.37wan.cn/huodong/qgjmh-yhjy-20170407/images/wap-r.png);
            right: 0.1rem;
        }
    </style>
</head>
<body>
<div id="wrap">
    <ul id="list">
        <li class="active">
            <div><img src="img/m1.jpg" /></div>
            <div><img src="img/m2.png" /></div>
        </li>
        <li>
            <div><img src="img/m3.jpg" /></div>
            <div><img src="img/m4.png" /></div>
        </li>
        <li>
            <div><img src="img/m5.png" /></div>
        </li>
    </ul>
</div>
<a href="javascript:void(0)" id="go-left"></a>
<a href="javascript:void(0)" id="go-right"></a>

<script type="text/javascript" src="http://image.37wan.cn/common/js/jquery-1.9.1.min.js"></script>
<script>
    function rePosition(){
        var width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
        var ratio=width/750;
        if(width<=750){
            document.getElementsByTagName(‘html‘)[0].style.fontSize=100*ratio+"px";
        }else{
            document.getElementsByTagName(‘html‘)[0].style.fontSize="100px";
        }
    }
    rePosition();
    window.onresize = function () {
        rePosition();
    };
    function goStep(d) {
        var liNum = $("#list li").length;
        var liAct = $("#list>li.active").index();
        var canr = (liNum - liAct) > 2;
        var canl = liAct > 0;
        if (d === "r") {
            if (canr) {
                changeLeft("r");
                $("#list>li.active").removeClass("active").next().addClass("active");
            }
        } else if (d === "l") {
            if (canl) {
                changeLeft("l");
                $("#list>li.active").removeClass("active").prev().addClass("active");
            }
        }
    }
    var $ul=$("#list");
    var lidistant=parseFloat($ul.find("li:first").width())+parseFloat($ul.find("li:first").css("margin-right"));
    var thisOffset=$ul.css("left");
    function changeLeft(d){
        if(d==="l"){
            thisOffset=$ul.css("left");
            $ul.animate({"left":lidistant+parseFloat(thisOffset)},"fast");
        }else if(d==="r"){
            thisOffset=$ul.css("left");
            $ul.animate({"left":parseFloat(thisOffset)-lidistant},"fast");
        }
    }
    $("#go-left").on("click",function(){
        goStep("l");
    });
    $("#go-right").on("click",function(){
        goStep("r");
    });

    var startX,endX=0;
    document.getElementById("wrap").addEventListener(‘touchstart‘,function(evt){
        var touch = evt.touches[0]; //获取第一个触点
        startX = Number(touch.pageX); //页面触点X坐标
    });
    document.getElementById("wrap").addEventListener(‘touchmove‘,function(evt){
        evt.preventDefault();
        var touch = evt.touches[0]; //获取第一个触点
        endX = Number(touch.pageX); //页面触点X坐标
    });
    document.getElementById("wrap").addEventListener(‘touchend‘,function(evt){
        if(endX-startX>90){
            goStep("l")
        }else if(endX-startX<-90){
            goStep("r")
        }
    });
</script>
</body>
</html>

 该功能尚未封装成为插件

以上是关于多行触屏滑动轮播的主要内容，如果未能解决你的问题，请参考以下文章

滑动轮播的组件

jquery手机触屏左右滑动切换栏目怎么做

jquery怎么实现手机触屏图片滑动代码,手向左或向右滑动，图片滑动。不滑动的时候图片自动循环滚动

jquery简单自动轮播图代码怎么写

jquery自动轮播图代码只能出现一张图片第二三张就空白了 轮播正常播放

简易图片自动轮播