使用javascript或jquery进行水平滚动div onclick
我花了最近两天为此寻找一个简单的javascript或jquery代码。 我想使用javascript或jquery合并水平滚动div来显示我的Web组合的工作页面的图像和描述性文本。
它的function非常类似于此处显示的滑动滑动滚动： 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看起来像这样：
你的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/
希望这可以帮助。
你可以做这样的事情。 没有经过测试的代码，只是给你一个提示。
![]()
![]()
Left right 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); });