我想寫個輪播圖插件,我頁面上調(diào)用了兩次..... 每一個傳進(jìn)去三張圖片,但是我循環(huán)出來添加到頁面上的時候發(fā)現(xiàn)有6個li我現(xiàn)在想要的效果就是我循環(huán)一次給我第一個添加3個li 第二次給第二個添加相對應(yīng)的li 希望路過的大牛給指點下....
$(".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"
}
});
(function($, window, document, undefined) {
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, window, document)
業(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"
}
});