使用javascript或jquery进行水平滚动div onclick

Question

我花了最近两天为此寻找一个简单的javascript或jquery代码.我想使用javascript或jquery合并水平滚动div来显示我的Web组合的工作页面的图像和描述性文本.

它的功能非常类似于此处显示的滑动滑动滚动: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 替换表格），但它有效。

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