鍍金池/ 問答/HTML5  HTML/ 移動端實現(xiàn)無縫左右滑動的問題

移動端實現(xiàn)無縫左右滑動的問題

如圖紅框部分所示 它可以左右無縫滑動 每次滑動的時候顯示紅框部分的內(nèi)容 應(yīng)該是滑動了整屏的寬度吧 不知道我理解對不對 然后還有一種滑動距離太小 又被拉回去的感覺
寫了很久 效果實在不行 想請教大家有沒有好的解決方法呢
圖片描述

回答
編輯回答
維她命

<!DOCTYPE html>
<html>
<head>

<title></title>
<meta charset="utf-8">
<style type="text/css">
    
    *{
        margin:0;
        padding:0;
    }

    #box{
        width:800px;
        height:100px;
        position:relative;
        overflow: hidden;
    }

    ul{
        list-style: none;
        position:absolute;
        width:2000px;
        left:0; 
        top:10px;
    }

    ul li{
        width:200px;
        height:100px;
        background:#ccc;
        float: left;
        margin:5px;
    }

    .red{
        background:red;
    }

    .blue{
        background: blue;
    }

    .green{
        background: green;
    }

</style>

</head>
<body>

<div id="box">


<ul id="ul">
    <li></li>
    <li class="red"></li>
    <li class="blue"></li>
    <li class="green"></li>
</ul>

</div>

<script>

var ul = document.getElementById("ul");
var lis = ul.getElementsByTagName("li");
var len = lis.length;
var width = len 2 210; // li的寬度+margin
var html = ul.innerHTML; // ul的內(nèi)容

// 動態(tài)設(shè)置ul內(nèi)容和width
html += html;
ul.innerHTML = html;
ul.style.width = width + 'px';

setInterval(function(){

var left = ul.offsetLeft;

if(-left == width - 800){
    left = -(width / 2 - 800);
}

ul.style.left = --left + "px";

},1000 / 60)

</script>

</body>
</html>
這是我的例子，你可以參考一下

2017年6月16日 22:51
編輯回答
苦妄

swiper 可以幫你

2017年1月8日 02:21
編輯回答
別傷我

找一個走馬燈組件就可以解決了。網(wǎng)上一大堆。

2017年4月12日 11:33