CSS&&；JavaScript滚动div

我有一个有图像的div。将会有很多图像，所以我希望能够使用按钮在div中左右滚动。我以前使用过代码，但是在将div从媒体查询和响应更改为静态直接CSS时，它不再滚动

html:

javascript:

var timer1;
function scrollDiv(divId, depl) {
    var scroll_container = document.getElementById(divId);
    scroll_container.scrollLeft -= depl;
    timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 10);
}

---

嗯，它对我来说确实正确。您的代码中只有一个小的输入错误，

div.right-slider-button

中的按钮应该调用

scrollDiv

方法，参数

depl

的值为-3（在您给我们的代码中，两个按钮都向同一方向滚动）。除此之外，它在FF、Safari和Opera下一个节目中对我来说都很好。

body {
                background-color: #000;
            }

            #maincontent {
                width: 960px;
                margin: 0 auto;
                background-color: #000;
                color: #fff;
            }

            #gallery-display {
                height: 500px;
                margin: 0 auto;
                position: relative;
                overflow: hidden;
                background-color: #000;
            }

            #gallery-display img {
                display: block;
                margin: 0 auto;
                height: 500px;
                right: 0;
                left: 0;
            }

            #gallery-display [id^='image']:target img {
                top: 0; 
                display: block;
                margin: 0 auto;
                height: 500px;
            }


            #gallery-display [id^="image"] img {
                position: absolute;
                top: -500px;
                border: 0;
                -moz-transition: top 0.5s ease-in;
                -ms-transition: top 0.5s ease-in;
                -webkit-transition: top 0.5s ease-in;
                -o-transition: top 0.5s ease-in;
            }

            #gallery-display [id^='image']:target a {
                background: #fff;
                border: 3px solid #333;
                width: 10px;
                height: 10px;
            }

            #gallery-slider-parent {
                background-color: #000;
                position: relative;
                width: 960px;
                overflow: hidden;
                float: left;
            }

            #gallery-slider {
                background-color: #000;
                display: inline;
                width: 94%;
                float: left;
                height: 120px;
                overflow: auto;
                white-space: nowrap;
            }

            #gallery-slider img {
                height: 75px;
                padding: 15px;
                float: none;
            }

            .left-slider-button input[type="button"]{
                opacity: .7;
                color: #FFF;
                float: left;
                width: 28px;
                border: none;
                height: 100px;
                background-color: #151515;
            }

            .right-slider-button input[type="button"]{
                opacity: .7;
                color: #FFF;
                float: left;
                width: 28px;
                border: none;
                height: 100px;
                display: inline-block;
                background-color: #151515;
            }

var timer1;
function scrollDiv(divId, depl) {
    var scroll_container = document.getElementById(divId);
    scroll_container.scrollLeft -= depl;
    timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 10);
}