[英]horizontal scrolling div onclick with javascript or jquery
最近两天,我一直在为此寻找简单的javascript或jquery代码。 我想结合使用javascript或jquery的水平滚动div来显示我的Web作品集的工作页面的图像和描述性文本。
它的功能与此处显示的glide-onclick滚动非常相似: http : //www.dyn-web.com/code/scroll/demos.php#horiz不幸的是,该代码许可证的价格为40美元,我是一个破门的学生。
加载页面时,将显示三个投资组合图片。 其他功能隐藏在右侧的溢出区中。 单击左箭头(可以创建)后,将从右侧显示一个新的图像幻灯片。 右箭头单击将其发送回溢出。 我不需要滚动条,只需要箭头来控制幻灯片。
任何帮助深表感谢。 谢谢。
您可以只使用如下代码:
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),但是它可以工作。
您显然也需要那里的两个按钮
有很多jQuery插件可让您轻松完成此操作。 例如: http : //slidesjs.com/
希望这可以帮助。
你可以做这样的事情。 未经测试的代码,只是给您一个提示。
<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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.