多个jQuery幻灯片实例
Multiple jQuery slideshow instances
我创建了一个非常简单的jQuery幻灯片,但在页面上有两个时遇到了问题。我以为通过在本地定义所有变量,问题就会得到解决,但我似乎找不到解决方案。
目前,第二个实例正常工作,但第一个实例不正常。它要么激活第二个,要么什么都不做。
JSFiddle:http://jsfiddle.net/3pkujpur/1/
HTML:
<div class="slideshow">
<div class="navigator">
<a class="prev">Prev</a>
<a class="next">Next</a>
</div>
<ul class="slider">
<li class="active">
<h2>Slider 1 Slide 1</h2>
</li>
<li>
<h2>Slider 1 Slide 2</h2>
</li>
<li>
<h2>Slider 1 Slide 3</h2>
</li>
</ul>
</div>
<div class="slideshow">
<div class="navigator">
<a class="prev">Prev</a>
<a class="next">Next</a>
</div>
<ul class="slider">
<li class="active">
<h2>Slider 2 Slide 1</h2>
</li>
<li>
<h2>Slider 2 Slide 2</h2>
</li>
<li>
<h2>Slider 2 Slide 3</h2>
</li>
</ul>
</div>
jQuery:
(function($) {
$.fn.slideShow = function() {
return this.each(function() {
var $this = jQuery(this);
var $slider = $this.find('.slider');
var $slides = $slider.children();
var length = $slides.size();
var $navigator = $this.find('.navigator');
var $trigger = $navigator.children();
var $prev = $trigger.filter('.prev');
var index = 0;
slideTo = function (idx) {
$slides
.removeClass('active')
.eq(idx)
.queue(function(next){
jQuery(this).addClass('active');
next();
});
index = idx;
};
$trigger.click( function () {
var idx = $slides.filter('.active').index(),
prevIdx = idx - 1 < 0 ? length - 1 : index - 1;
nextIdx = idx + 1 < length ? index + 1 : 0;
slideTo(jQuery(this)[0] === $prev[0] ? prevIdx : nextIdx);
});
});
};
})(jQuery);
jQuery('.slideshow').slideShow();
您的slideTo
函数在全局范围内,因此正在进行更改。要修复它,只需添加var
var slideTo = function (idx) {
相关文章:
- ES6构造函数返回基类的实例
- 幻灯片滚动javascript不起作用
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- KnockoutJS-组件-多个实例
- 为什么无法在TypeScript中导出类实例
- 如何在GoogleWeb工具包(GWT)中从JSNI调用接口(实例化)
- 创建具有可变长度幻灯片显示的幻灯片
- fluxxor向一个flux实例添加一组以上的操作
- 使用jQuery获取Dropzone实例/对象
- "实例范围”;TypeScript类的getter/setter
- 如何在速度模板中获取LiferayPortlet实例id
- 同一项怎么可能在一个实例中未定义,却在另一个实例上定义
- 通过幻灯片更改事件停止使用jquery的音频
- 实例创建(JS)
- 多个jQuery幻灯片实例
- magento中的多个幻灯片.js实例
- 使用Web动画创建右幻灯片和淡出单实例动画
- JSON对象多实例(幻灯片效果)
- 我怎么能有多个基于重复类的幻灯片实例
- 为什么我的mootools幻灯片实例阻止代码和幻灯片被执行?