使用 javascript 或 jquery 水平滚动 div onclick

Question

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

它的功能与此处显示的 glide-onclick 滚动非常相似： http:// /www.dyn-web.com/code/scroll/demos.php#horiz 不幸的是，代码许可证是 40 美元，而我是一个破产的学生。

加载页面时，将显示三个投资组合图像。额外内容隐藏在右侧的溢出中。单击左箭头（我可以创建），一个新的图像幻灯片从右侧进入视图。单击右箭头会将其送回到溢出状态。我不需要滚动条，只需要控制幻灯片的箭头。

非常感谢任何帮助。谢谢。

Answer 1

你可以使用这样的代码：

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

}

你的 html 看起来像这样：

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

你的 css 看起来像这样：

.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 替换表格）但它有效。

显然你还需要那里的两个按钮

Answer 2

有很多 jQuery 插件可以让您轻松地做到这一点。
例如：http://slidesjs.com/

希望这会有所帮助。

Answer 3

你可以做这样的事情。未经测试的代码，只是给您一个提示。

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

Answer 4

您可以查看 iscroll 4。

http://cubiq.org/iscroll-4

您有一个scrollTo 方法或scrollToElement 方法...