Jquery只需在同一页上滚动多个滚动条
Jquery simplyScroll multiple scrollers on the same page
我需要简单地使用Jquery。在我的页面上滚动插入几次,就像几个滚动条一样。我在这里发布代码,请帮忙。我试着用这个代码自己做这件事,但我无法完成。
<script type="text/javascript" src="./jQuery simplyScroll - Logicbox_files/jquery.min.js">
</script>
<!--<script type="text/javascript" src="/js/common.js"></script>-->
<script type="text/javascript" src="./jQuery simplyScroll - Logicbox_files/jquery.simplyscroll-1.0.4.min.js"></script>
<link rel="stylesheet" href="./jQuery simplyScroll - Logicbox_files/jquery.simplyscroll-1.0.4.css" media="all" type="text/css">
<script type="text/javascript">
(function($) {
$(function() {
$("#scroller").simplyScroll({
autoMode: 'loop'
});
});
})(jQuery);
</script>
</head>
<div class="simply-scroll simply-scroll-container"><div class="simply-scroll-back"></div><div class="simply-scroll-forward"></div><div class="simply-scroll-clip">
<ul id="scroller" class="simply-scroll-list" style="width: 2895px; ">
<li><img src="./jQuery simplyScroll - Logicbox_files/20080608_9N3H5GYL_tb.jpg" width="290" height="200" alt="Firehouse"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080513_4D3SD1BQ_tb.jpg" width="290" height="200" alt="Chloe nightclub"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080513_VPJWVQRW_tb.jpg" width="290" height="200" alt="Firehouse bar"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080514_B1YJ08B6_tb.jpg" width="290" height="200" alt="Firehouse chloe club fishtank"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080514_JYW68XPT_tb.jpg" width="290" height="200" alt="Firehouse restaurant"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080608_38CG51J2_tb.jpg" width="290" height="200" alt="Firehouse"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080608_9N3H5GYL_tb.jpg" width="290" height="200" alt="Firehouse"></li><li><img src="./jQuery simplyScroll - Logicbox_files/20080513_4D3SD1BQ_tb.jpg" width="290" height="200" alt="Chloe nightclub"></li></ul></div></div>
<div class="simply-scroll simply-scroll-container"><div class="simply-scroll-back"></div><div class="simply-scroll-forward"></div><div class="simply-scroll-clip">
<ul id="scroller" class="simply-scroll-list" style="width: 2895px; ">
<li><img src="./jQuery simplyScroll - Logicbox_files/20080608_9N3H5GYL_tb.jpg" width="290" height="200" alt="Firehouse"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080513_4D3SD1BQ_tb.jpg" width="290" height="200" alt="Chloe nightclub"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080513_VPJWVQRW_tb.jpg" width="290" height="200" alt="Firehouse bar"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080514_B1YJ08B6_tb.jpg" width="290" height="200" alt="Firehouse chloe club fishtank"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080514_JYW68XPT_tb.jpg" width="290" height="200" alt="Firehouse restaurant"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080608_38CG51J2_tb.jpg" width="290" height="200" alt="Firehouse"></li>
<li><img src="./jQuery simplyScroll - Logicbox_files/20080608_9N3H5GYL_tb.jpg" width="290" height="200" alt="Firehouse"></li><li><img src="./jQuery simplyScroll - Logicbox_files/20080513_4D3SD1BQ_tb.jpg" width="290" height="200" alt="Chloe nightclub"></li></ul></div></div>
感谢
不能多次使用同一个id。并且在它不起作用之前
类似的东西
(function($) {
$(function() {
$("#scroller").simplyScroll({
autoMode: 'loop'
});
$("#scroller1").simplyScroll({
autoMode: 'loop'
});
$("#scroller2").simplyScroll({
autoMode: 'loop'
});
});
})(jQuery);
对于多个滚动条,可以使用class
而不是id
。我希望它能帮助你。
(function($) {
$(function() {
$(".scroller").simplyScroll({
autoMode: 'loop'
});
});
})(jQuery);
不要使用id和类,比如这个
<ul class="scroller simply-scroll-list" style="width: 2895px; ">....</ul>
<ul class="scroller simply-scroll-list" style="width: 2895px; ">....</ul>
相关文章:
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏)浏览器滚动条
- 在firefox和chrome中的左侧显示iframe滚动条
- jquery:将动画绑定到滚动条位置的更好方法
- 在窗口中添加滚动条
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 使用没有插件的javascript自定义滚动条
- CodeMirror.禁用垂直滚动条
- 在滚动时,在隐藏滚动条和隐藏溢出的同时触发事件
- 可以'无法使滚动条正常工作
- jQuery自动滚动滚动滚动条
- 视差滚动滚动顶部
- 用javascript滚动滚动条或鼠标滚轮后引发事件
- 水平滚动导航条不能正常工作
- 有人可以帮助修复非滚动滚动条
- 滚动/滚动记分牌HTML
- 在滚动导航条后面滑块和银条视差效果不起作用
- 如何添加一个随用户滚动滚动的按钮
- 无限滚动(滚动加载)与 html 表标签
- iPad 滚动 - 滚动期间触发哪些事件