HTML / JS水平滚动DIV列表

HTML / JS horizontal scrolling DIV "list"

本文关键字：DIV 列表 滚动 水平 JS HTML      更新时间：2023-09-26

我想做的是一个水平滚动的div列表就像互联网上几乎所有的大网站一样(比如netflix)。

我试图使它使用一个主DIV，这将是某种容器，第二个DIV持有所有的内容，是在第一个DIV和很多DIV，每个内容模块一个，去第二个DIV内。第二个DIV溢出的部分应该隐藏，并且可以通过移动它(第二个DIV)来显示内容。

这是我能想出的最好的方法，但它仍然不起作用。

这是我的HTML 
<button onmouseover="left=1" onmouseout="left=0">
    <</button>
        <div class="container">
            <div id="filler" style="left:0px">
                <div class="module" style="background:coral;">testing</div>
                <div class="module" style="background:lightblue;">testing</div>
                <div class="module" style="background:lightgreen;">testing</div>
                <div class="module" style="background:salmon;">testing</div>
                <div class="module" style="background:lightyellow;">testing</div>
            </div>
        </div>
        <button onmouseover="right=1" onmouseout="right=0">></button>
CSS 

.container {
    height:50px;
    width:200px;
    overflow:hidden;
}
#filler {
    height:50px;
    width:250px;
    position:relative;
    border-radius:10px;
    background:crimson;
}
.module {
    width:50px;
    height:50px;
    border-radius:5px;
    float:left;
    line-height:50px;
    text-align:center;
}
JavaScript: 

var feft = 0
//feft stands for filler left
var right = 0
var left = 0
var loaded = 0
window.onload=function(){
loaded=1
}
function move() {
    if(loaded == 1){
        if (left == 1 && feft <= 250) {
            //left == 1 && feft <= filler width
            document.getElementById("filler").style.left = feft + 1
        }
        if (right == 1 && feft >= 0) {
            //right == 1 && feft >= 0 
            document.getElementById("filler").style.left = feft - 1
        } //these IFs tests if the filler should move 
        feft = document.getElementById("filler").style.left
        //this sets the feft variable to what it needs to be for the next run of the function  
    }}
window.setInterval(move(), 100)

我为你做了一把小提琴。

演示

HTML代码

<button onmouseover="left=1" onClick="move(-1)"><</button>
    <div class="container">
        <div id="filler" style="left:0px">
            <div class="module" style="background:coral;">testing</div>
            <div class="module" style="background:lightblue;">testing</div>
            <div class="module" style="background:lightgreen;">testing</div>
            <div class="module" style="background:salmon;">testing</div>
            <div class="module" style="background:lightyellow;">testing</div>
        </div>
    </div>
<button onmouseover="right=1" onClick="move(1)">></button>

JS代码
var position = 0;
var moduleCount = document.querySelector(".module").length;
window.move = function(number) {
    if (number) {
       position += number;
        if (number == 0 || number > moduleCount) {
            position = 0;
        }
    } else {        
        if (position <= 4) {
            position++;
        } else {
            position = 0;
        }
    }
    moduleOffset =  document.querySelector(".module").offsetWidth;
    filler = document.querySelector("#filler");
    filler.style.left = -( position* moduleOffset) + "px";
}
setInterval(window.move, 3000);

你要做的事情叫做"Carousel"。我建议使用bootstrap为例，然后在您的网站实现它。

http://getbootstrap.com/javascript/旋转木马

尝试将overflow: scroll作为CSS属性添加到您的容器div中。

相关文章：