使用 javascript 或 jquery 水平滚动 div onclick [英] horizontal scrolling div onclick with javascript or jquery

问题描述

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

I have spent the last two days looking for a simple javascript or jquery code for this. I want to incorporate a horizontal scrolling div using javascript or jquery to display images and descriptive text for the work page of my web portfolio.

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

It would function very similar to the glide-onclick scrolling shown here: http://www.dyn-web.com/code/scroll/demos.php#horiz Unfortunately that code license is $40, and I am a broke student.

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

On loading of the page, three portfolio images will be shown. Extras are hidden in the overflow to the right. Onclick of a left arrow (I can create), a new image slide comes into view from the right. A right arrow click sends it back into overflow. I don't want scrollbars, just arrows controlling the slides.

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

Any help is much appreciated. Thanks.

推荐答案

你可以使用这样的代码:

You can just use code like this:

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 看起来像这样:

where your html looks like this:

<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 看起来像这样:

and your css looks like this:

.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 替换表格)，但它可以工作.

I wrote the above a really long time ago - so you probably want to update it a bit (replace the table's with div's for example) but it works.

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

You obviously need the two buttons on there as well

这篇关于使用 javascript 或 jquery 水平滚动 div onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！