localScroll用于多个/单独的图像幻灯片

问题描述

大家好.
我正在尝试将多个图像幻灯片(称为轮播")添加到html页面.我考虑添加实际的预制轮播，但是当我知道您可以使用localScroll锚定以最少的代码获得相同的效果时，我认为代码在大多数情况下都是过大的.
因此，当我向html添加第二个幻灯片时，我设法使用localScroll(一个幻灯片由分页按钮控制)以完整的工作顺序获得了一个幻灯片.基本上，我认为通过复制幻灯片代码块，它可以独立工作……当然这很容易；)(没来)这就是发生的事情…….
幻灯片放映一个"效果很好....但是
幻灯片2"本身不起作用，而是控制幻灯片1"?！?

我希望对此有一个简单的解决方案，例如针对某些代码更改以针对所有单独的幻灯片显示-我不确定该怎么做.
任何帮助表示赞赏.
非常感谢

Hello folks.
I am trying to add multiple image slideshow(known as ''carousel'') to a html page. I looked into adding actual pre made carousels but I thought the code was overkill in most when I knew you could use localScroll to anchors for the same effect with minimal code.
So I managed to get one slideshow in full working order using localScroll(slideshow is controlled by pagination buttons) upon adding a second slideshow to html I ran into difficulties. Basically I thought by duplicating the slideshow code block it would work independently.....ofcourse that would be to easy;) (It didn''t) Here''s what happens....
''Slideshow one'' works perfectly....but
''Slideshow two'' doesn''t work on itself but instead controls ''slideshow one''?!?

I hope there is a simple solution to this, as in some code alteration to target all individual slideshows - this I''m not sure how to do.
Any help appreciated.
Many Thanks

<script type="text/javascript">

jQuery(function( $ ){
$.localScroll.defaults.axis = 'xy';

$.localScroll({
//$('#content').localScroll()
target: '#content', // could be a selector or a jQuery object too.
queue:true,
duration:1500,
hash:false,
easing:'easeOutQuart',
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object, can be modified
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
}
});
});

</script>

<div id="box1">

<div id="numbers">
<a href="#one" class="numb">1</a>
<a href="#two" class="numb">2</a>
<a href="#three" class="numb">3</a>
<a href="#four" class="numb">4</a>
</div>

<div id="content">

<div id="slide">
<a name="one"><div id=""><img src="images/1.jpg" width="568" height="457"/></a></div>
<a name="two"><div id=""><img src="images/2.jpg" width="568" height="457"/></a></div>
<a name="three"><div id=""><img src="images/3.jpg" width="568" height="457"/></a></div>
<a name="four"><div id=""><img src="images/4.jpg" width="568" height="457"/></a></div>
</div>

</div>

</div>

推荐答案

这篇关于localScroll用于多个/单独的图像幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！