我想寫個輪播圖插件,我頁面上調用了兩次..... 每一個傳進去三張圖片,但是我循環出來添加到頁面上的時候發現有6個li我現在想要的效果就是我循環一次給我第一個添加3個li 第二次給第二個添加相對應的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;
// --> 这个地方会循环两次 我页面调用的时候传了两个$picObj
// --> 但是我发现循环时候它是直接在每个$(".xxx_carousel_pic_warp")下面添加了六个li 我现在想要的效果就是循环第一次 给我的第一个这个类名的加三个li,
// --> 循环第二次的时候给我第二个类名的加三个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)
你的兩個元素,類別名稱都是
.xxx_carousel
,所以當你給$(".xxx_carousel")
綁定的時候,都會同時綁定兩個,正確的做法是:第一次只選取第一個綁定,第二次選取第二個綁定,就可以了。