使用javascript或jquery进行水平滚动div onclick [英] horizontal scrolling div onclick with javascript or jquery
问题描述
我花了两天时间为此寻找一个简单的javascript或jquery代码。我想使用javascript或jquery合并水平滚动div来显示我的Web组合的工作页面的图像和描述性文本。
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.
它的功能非常类似于此处显示的滑动滚动滚动: 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如下所示:
.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屋!