0
這個插件是一個簡單的傳送帶滑塊。它在頁面上只有一個類實例的情況下工作，但當多個實例全部移動時，無論點擊哪個上一個/下一個按鈕。我沒有看到是什麼導致了這個問題。jQuery插件的多個實例
(function($){
$.fn.simplecarousel = function(params) {
return this.each(function() {
// set config
var defaults = {
width: 970,
height: 400,
next: false,
prev: false,
current: 0,
items: 0,
slidespeed: 600,
visible: 1,
};
var config = $.extend(defaults, params);
// configure carousel ul and li
var ul = $(this);
var li = ul.children('li');
config.items = li.length;
var height = config.height;
var width = li.outerWidth(true);
var fullWidth = li.outerWidth(true);
var countPages = Math.ceil(($(config.items).length) * config.visible);
var i = 1;
if(config.visible>1) {
width = width*config.visible;
}
ul.wrap('<div class="carousel-frame" style="width:'+width+'px;height:'+height+'px;overflow:hidden">');
var container = ul.parent('.carousel-frame');
ul.width(config.items * fullWidth);
ul.height(config.height);
ul.css('overflow','hidden');
li.each(function(i,item) {
$(item).width(config.width);
$(item).height(config.height);
$(item).css('float','left');
});
// function for sliding the carousel
var slide = function(dir, click) {
if(dir == "next") {
config.current += config.visible;
if(config.current >= config.items) {
config.current = 0;
}
} else if(dir == "prev") {
config.current -= config.visible;
if(config.current < 0) {
config.current = (config.visible == 1) ? config.items-1 : config.items - config.visible + (config.visible - (config.items % config.visible));
}
} else {
config.current = dir;
}
// slide
ul.animate({marginLeft: -1.0 * config.current * fullWidth}, config.slidespeed);
if(typeof click != "undefined") {
config.auto = false;
}
}
// set event handler for next and prev
if(config.next != false) {
config.next.click(function() {
i++;
if(i >= 2){ $(config.prev).show(); $(this).parent().find('.slider-wrapper').css({margin: '0px'}); }
if(i == (countPages)) { $(config.next).hide(); }
slide('next',true);
});
}
if(config.prev != false) {
config.prev.click(function() {
i--;
if(i == 1){ $(config.prev).hide(); $(this).parent().find('.slider-wrapper').css({marginLeft: '60px'}); }
if(i < (countPages)) { $(config.next).show(); }
slide('prev',true);
});
}
});
}
})(jQuery);
JS
jQuery(document).ready(function() {
$(".slider-wrap").simplecarousel({
width: 310,
visible: 3,
next: $('.pager-right'),
prev: $('.pager-left')
});
});
HTML
<div class="pager-left"><i class="icon-chevron-left icon-4x"></i></div>
<div class="slider-wrapper">
<ul class="slider-wrap">
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Etiam in risus mauris, eget ultricies erat.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Etiam in risus mauris, eget ultricies erat.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Etiam in risus mauris, eget ultricies erat.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Etiam in risus mauris, eget ultricies erat.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
</ul>
</div>
<div class="pager-right"><i class="icon-chevron-right icon-4x"></i></div>
<div class="pager-left"><i class="icon-chevron-left icon-4x"></i></div>
<div class="slider-wrapper">
<ul class="slider-wrap">
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Etiam in risus mauris, eget ultricies erat.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Etiam in risus mauris, eget ultricies erat.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Etiam in risus mauris, eget ultricies erat.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
<li>
<img src="scrap/image.jpg" width="310" height="174" />
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
</li>
</ul>
</div>
<div class="pager-right"><i class="icon-chevron-right icon-4x"></i></div>
我懷疑你需要命名轉盤分別別的任何動作作用於所有的人。你可以發佈的HTML？ – someuser 2013-04-29 16:29:07
@l_t我添加了HTML。我希望我不必單獨命名它們。 – kel 2013-04-29 16:38:24