使用javascript或jquery水平滚动div onclick

在过去的两天里，我一直在寻找一个简单的javascript或jquery代码。我想使用javascript或jquery合并一个水平滚动div，以显示我的web公文包的工作页面的图像和描述性文本

它的功能非常类似于这里显示的glide-onclick滚动：不幸的是，代码许可证是40美元，而我是一个破产的学生

加载页面时，将显示三个公文包图像。附加项隐藏在右侧的溢出中。点击左箭头（我可以创建），一个新的图像幻灯片从右侧进入视图。右键单击会使其返回溢出状态。我不需要滚动条，只需要控制幻灯片的箭头

---

非常感谢您的帮助。谢谢。

你可以这样做。不是测试代码，只是给你一个提示

<div id="imageContainer">
  <div id="imageWrapper">
    <img />
    <img />
  </div>
  <span id="left">Left</span>
  <span id="right">right</span>
</div>

var imageWidth = 200;
$("#left").click(function(){
  $("#imageWrapper").animate({marginLeft:"-="+imageWidth}, 500);
  //Offcourse you need to handle the corner cases when there is not image to move left
});

$("#right").click(function(){
  $("#imageWrapper").animate({marginLeft:"+="+imageWidth}, 500);
});

左边
正确的
var imageWidth=200；
$（“#左”）。单击（函数（）{
$（“#imageWrapper”）.animate（{marginLeft:“-=”+imageWidth}，500）；
//当然，当没有图像向左移动时，您需要处理角情况
});
$（“#右”）。单击（函数（）{
$（“#imageWrapper”）.animate（{marginLeft:“+=”+imageWidth}，500）；
});

您可以使用如下代码：

function FixMargin(left) {
    $(this).css("left", left);
}

$(document).ready(function () {

$('#rightbutton').click(function () {
    var left = parseInt($("#bitToSlide").css('left'), 10);
    $("#bitToSlide").animate({ left: left - pageWidth }, 400, FixMargin(left - pageWidth));
});

$('#leftbutton').click(function () {
    var left = parseInt($("#bitToSlide").css('left'), 10);
    $("#bitToSlide").animate({ left: left + pageWidth }, 400, FixMargin(left + pageWidth));
});

}

<div id="slideleft" class="slide">
    <div class="inner" id="bitToSlide" style="width:1842px">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr valign="top">
                <td id="page1" style="width: 614px">
                </td>

                <td id="page2" style="width: 614px">
                </td>
            </tr>
        </table>
    </div>
</div>

.slide
{
position:relative;
overflow:hidden;
height:365px;
width:597px;
margin:1em 0;
background-color:#E9ECEF;
border:0px
}

.slide .inner
{
position:absolute;
left:0;
bottom:0;
height:365px;
padding:0px;
background-color:#E9ECEF;
color:#333
}

您的html如下所示：

function FixMargin(left) {
    $(this).css("left", left);
}

$(document).ready(function () {

$('#rightbutton').click(function () {
    var left = parseInt($("#bitToSlide").css('left'), 10);
    $("#bitToSlide").animate({ left: left - pageWidth }, 400, FixMargin(left - pageWidth));
});

$('#leftbutton').click(function () {
    var left = parseInt($("#bitToSlide").css('left'), 10);
    $("#bitToSlide").animate({ left: left + pageWidth }, 400, FixMargin(left + pageWidth));
});

}

<div id="slideleft" class="slide">
    <div class="inner" id="bitToSlide" style="width:1842px">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr valign="top">
                <td id="page1" style="width: 614px">
                </td>

                <td id="page2" style="width: 614px">
                </td>
            </tr>
        </table>
    </div>
</div>

.slide
{
position:relative;
overflow:hidden;
height:365px;
width:597px;
margin:1em 0;
background-color:#E9ECEF;
border:0px
}

.slide .inner
{
position:absolute;
left:0;
bottom:0;
height:365px;
padding:0px;
background-color:#E9ECEF;
color:#333
}

我很久以前就写过上面的内容了，所以您可能想对它进行一点更新（例如用div替换表），但它可以工作

---

显然，您也需要上面的两个按钮

有很多jQuery插件，可以让您非常轻松地完成这项工作。 例如：

---

希望这有帮助。

您可以查看iscroll 4

---

您有scrollTo方法或scrollToElement方法…

srsly$40美元，用于该功能？让我看看能不能举个例子。。。这是在一个div中，还是幻灯片占据了整个页面？你仍然可以查看js文件而不必付费。@kei correct。。。从中学习。。。但实际上使用它是偷窃……页面的主内容div中会有一个包含所有图像的div。每个图像也可能位于自己的div中，因此我可以使用描述性文本和链接来设置样式。谢谢。谢谢您的输入，但我已经尝试过类似于您发布的jquery滑块，这并不是我想要的。我已经接近成功，但在dreamweaver中，您的javascript代码正在生成错误（代码末尾出现红色框）。知道为什么吗？我把它包起来了