Ich m?chte ein Karussell-Bild-Plug-in schreiben. Ich habe es zweimal auf meiner Seite aufgerufen ... Jedes davon hat drei Bilder übergeben, aber als ich es durchgeschleift und der Seite hinzugefügt habe, stellte ich fest, dass es 6 davon waren Ich m?chte jetzt, dass ich beim ersten Mal 3 Li hinzufüge und beim zweiten Mal das entsprechende Li zum zweiten hinzufüge. Ich hoffe, ein vorübergehender Experte kann mir einen Rat geben....
$(".xxx_carousel").xxx_carousel({
$picObj: {
"1": "showImgItem",
"2": "showImgItem cyan",
"3": "showImgItem red"
}
});
$(".xxx_carousel").xxx_carousel({
indicatorLeftText: '左',
indicatorRightText: '右',
$picObj: {
"4": "showImgItem",
"5": "showImgItem cyan",
"6": "showImgItem red"
}
});
(Funktion($, Fenster, Dokument, undefiniert) {
var defaults = {
navEvents: 'click',
indicatorEvents: 'click',
indicator: true,
indicatorLeftText: 'left',
indicatorRightText: 'right',
animateSpeed: 800,
$picObj: {},
$cb: null
};
var xxx_carousel = function(ele, ops) {
this.$ele = ele;
this.settings = $.extend({}, defaults, ops);
var _this = this;
this.initaddElem();
}
xxx_carousel.prototype = {
initaddElem: function(){
var $picTemplate = '',
$carouselPicWarp = $(".xxx_carousel_pic_warp"),
_this = this;
// --> 這個地方會循環(huán)兩次 我頁面調(diào)用的時候傳了兩個$picObj
// --> 但是我發(fā)現(xiàn)循環(huán)時候它是直接在每個$(".xxx_carousel_pic_warp")下面添加了六個li 我現(xiàn)在想要的效果就是循環(huán)第一次 給我的第一個這個類名的加三個li,
// --> 循環(huán)第二次的時候給我第二個類名的加三個li 而不是一次添加6個.... 這個該是怎么解決的呢??
$.each(this.settings.$picObj, function(i, val) {
$picTemplate += '<li class="xxx_carousel_warp_item"><a class="' + val + '" href="javascript:;">' + i + '</a></li>'
})
$carouselPicWarp.append($picTemplate)
}
}
$.fn.xxx_carousel = function(opts) {
var xxxCarousel = new xxx_carousel(this, opts);
return xxxCarousel;
}
})(jQuery, Fenster, Dokument)
業(yè)精于勤,荒于嬉;行成于思,毀于隨。
你的兩個元素,類名都是.xxx_carousel
,所以當(dāng)你給$(".xxx_carousel")
綁定的時候,都會同時綁定兩個,正確的做法是:第一次只選中第一個綁定,第二次選中第二個綁定,就可以了。
$(".xxx_carousel:eq(1)").xxx_carousel({ // 注意:eq(1),也可以用jQuery的.eq(1)或者first()
$picObj: {
"1": "showImgItem",
"2": "showImgItem cyan",
"3": "showImgItem red"
}
});
$(".xxx_carousel:eq(2)").xxx_carousel({ // 注意:eq(2),也可以用jQuery的.eq(2),由于總共只有兩個,也可以用jQuery的.last()
indicatorLeftText: '左',
indicatorRightText: '右',
$picObj: {
"4": "showImgItem",
"5": "showImgItem cyan",
"6": "showImgItem red"
}
});