Question

我想要的是一个横向滚动的DIV“列表”，就像互联网上的每个大型网站一样（例如netflix）。

我试图让它使用一个主要的DIV，它将成为某种容器，第二个div包含所有内容，并且位于第一个DIV和许多DIV内，每个内容模块一个，进入内部第二个div。溢出主要部分的第二个DIV的部分应该隐藏，并且可以通过移动它来显示内容（第二个DIV）。

这是我能想到的最好的，但它仍然不起作用jsfiddle

这是我的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)

Answer 1

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

Answer 2

您想要做的是“Carousel”。我建议使用bootstrap，然后在你的站点中实现它。

http://getbootstrap.com/javascript/#carousel

Answer 3

我为你做了一个小提琴。

demo

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);

HTML / JS水平滚动DIV＆＃34; list＆＃34;

3 个答案: