jQuery左右键滚动
jQuery left and right button scroll
我已经想了几天了,似乎没有取得任何进展。我正在尝试使用图像作为滚动条进行简单的左右滚动,但似乎无法实现。这是我的代码:http://jsfiddle.net/7GrTM/1/
HTML
<div class="outerwrapper">
<div class="innerwrapper">
<div class="productsbox">
<img class="box_image" src="images/productsbox1.png" style="width:222px" alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox2.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox3.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox4.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox5.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox6.png" style='width:221px' alt="this"/>
</div>
</div>
</div>
<div class="productspace">
<img src="images/arrowleft.png" id="#left" alt="left"/>
<img src="images/arrowright.png" id="#right" style="padding-left: 10px;" alt="right"/>
</div>
JS-
$(function () {
$("#right, #left").click(function () {
var dir = this.id == "right" ? '+=' : '-=';
$("#outerwrapper").stop().animate({ scrollLeft: dir + '422' }, 1000);
});
});
CSS
.spacer {
width: 20px;
height: 319px;
display: inline-block;
}
.outerwrapper {
margin: 0px auto;
width: 1050px;
height: 323px;
display: inline-block;
overflow: hidden;
}
.innerwrapper {
width: 1600px;
height: 322px;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
任何帮助都将不胜感激。
您的ID是错误的,您将它们命名为#left
和#right
,而不仅仅是left
和right
。在您的JSfiddle中,您已经成功地将其设置为id:#left1
和#right1
。
解决方案:将ID改为left
和right
,这样您就有了:
<div class="productspace">
<img src="images/arrowleft.png" id="left" alt="left"/>
<img src="images/arrowright.png" id="right" style="padding-left: 10px;" alt="right"/>
</div>
您还试图将类outerwrapper
作为id
访问div,而不是作为class
访问div。要么将outerwrapper更改为ID,使其成为<div id="outerwrapper">
,要么将jquery更改为查找类:$(".outerwrapper")
(在我看来,以前的解决方案更优越,所以更改div ID)。
相关文章:
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 何时可以;我的用户脚本在Javascript中触发右键单击(上下文菜单)
- 如何知道你右键点击谷歌chrome扩展是什么
- 我们可以在HTML中禁用右键单击锚标记吗
- 在动态crm 2011中,右键单击已完成活动的只读文本时,您是否出现错误
- jqGrid - 在右键单击时禁止选择行
- 右键单击夜巡
- JavaScript 左键和右键单击功能
- 如何禁用右键单击以在 JavaScript 中下载图像
- 如何禁用右键单击WordPress网站
- 导致右键单击触发左键单击
- 通过右键单击更改完整日历中事件的背景颜色 - 不起作用
- 在 CkEditor 4.3 中禁用右键单击
- 右键点击标记-谷歌地图V3
- jQuery网站的键盘快捷键,焦点使用左键和右键转到上一个或下一个元素
- 使用Javascript禁用上下文菜单(右键单击)
- 为左键或右键单击附加事件侦听器-onclick'右键单击无效
- 复制右键单击灯箱的操作,就像在github.com上一样
- 使用Jquery右键停止垂直滚动
- Jquery滑块保持滚动右键点击下一步