jquery实现定制轮播图功能
本插件根据业务场景进行了充分的定制，可选功能有是否显示轮播图的控制栏，是否显示文字说明栏。控制栏选择框跳转，是否默认播放……，代码简单易懂，可定制程度高，还可根据具体场景需要，增加转场动画等。
首先新建myCarousel.js工具类，实现轮播图的功能代码：
var timer = null;
(function ($) {
MyCarousel = {
play: function () {
if (this.opts.index == this.opts.len) this.opts.index = -1;
this.opts.index++;
$("#imgContainer li img").attr('src', this.opts.imgUrls[this.opts.index]);
$("#selectImg option").removeAttr("selected").eq(this.opts.index).prop("selected", true);
if (this.opts.show_infobar) {
$("#infobar").html(this.opts.imgNames[this.opts.index]);
}
},
/*play END*/
bindAction: function () {
var self = this;
$("#imgContainer,#prev,#next").bind('mouseover.myCarousel', function () {
$("#prev,#next").show();
});
$("#imgContainer").bind('mouseout.myCarousel', function () {
if (!$("#prev,#next").is(":hidden")) $("#prev,#next").hide();
});
$("#prev,#nav_prev").bind('click.myCarousel', function () {
if (self.opts.index == 0) self.opts.index = self.opts.len + 1;
self.opts.index--;
$("#imgContainer li img").attr('src', self.opts.imgUrls[self.opts.index]);
$("#selectImg option").removeAttr("selected").eq(self.opts.index).prop("selected", true);
if (self.opts.show_infobar) {
$("#infobar").html(self.opts.imgNames[self.opts.index]);
}
});
$("#next,#nav_next").bind('click.myCarousel', function () {
if (self.opts.index == self.opts.len) self.opts.index = -1;
self.opts.index++;
$("#imgContainer li img").attr('src', self.opts.imgUrls[self.opts.index]);
$("#selectImg option").removeAttr("selected").eq(self.opts.index).prop("selected", true);
if (self.opts.show_infobar) {
$("#infobar").html(self.opts.imgNames[self.opts.index]);
}
});
$("#nav_play").bind('click.myCarousel', function () {
if (self.opts.isStop == 1) {
$("#nav_play").attr('src', "themes/pause.png");
self.opts.isStop = 0;
/*此处setInterval方法传入函数时，函数中的this会指向windows对象，
* 通过bind方法将this绑定进去，bind方法会创建一个新函数，
* 并将第一个参数作为新函数运行时的this*/
timer = setInterval(self.play.bind(self), self.opts.duration_speed);
} else {
clearInterval(timer);
$("#nav_play").attr('src', "themes/play.png");
self.opts.isStop = 1;
}
});
$("#selectImg").bind('change.myCarousel', function () {
var opt = $("#selectImg").val();
self.opts.index = opt;
$("#imgContainer li img").attr('src', self.opts.imgUrls[self.opts.index]);
if (self.opts.show_infobar) {
$("#infobar").html(self.opts.imgNames[self.opts.index]);
}
})
},
/*bindAction END*/
initSurface: function (dom) {
var imgNames = this.opts.imgNames;
var widths = this.opts.widths;
var heights = this.opts.heights;
dom.empty();
if (timer != null) clearInterval(timer);
var content =
'' +
'' +
'
' +
'
' +
'' +
'
';
if (this.opts.show_toolbar) {
content += '' +
'
' +
'
' +
'
' +
'';
}
content += ""
dom.append(content);
if (this.opts.show_infobar) {
$("#infobar").html(this.opts.imgNames[this.opts.index]);
}
$("#myCarousel").css({
height: heights,
width: widths
});
$("#imgContainer li").css({
height: heights - 30,
width: widths
});
$("#imgContainer img").css({
height: heights - 30,
width: widths
});
$("#prev").css({
top: heights * 0.5,
left: 15
});
$("#next").css({
top: heights * 0.5,
right: 15
});
$("#infobar").css({
top: 0,
left: 0,
});
if (this.opts.begin_play) {
if (this.opts.isStop == 1) {
$("#nav_play").attr('src', "themes/pause.png");
this.opts.isStop = 0;
/*此处setInterval方法传入函数时，函数中的this会指向windows对象，
* 通过bind方法将this绑定进去，bind方法会创建一个新函数，
* 并将第一个参数作为新函数运行时的this*/
timer = setInterval(this.play.bind(this), this.opts.duration_speed);
} else {
clearInterval(timer);
$("#nav_play").attr('src', "themes/play.png");
this.opts.isStop = 1;
}
}
},
/*initSurface END*/
init: function (options, el) {
this.$el = $(el);
this.opts = $.extend({}, $.fn.myCarousel.defaults, options);
if (this.opts.widths == 0 || this.opts.heights == 0) {
this.opts.widths = this.$el.width();
this.opts.heights = this.$el.height();
}
this.opts.len = this.opts.imgUrls.length - 1;
this.initSurface(this.$el);
this.bindAction();
},
};
$.fn.myCarousel = function (options) {
var carousel = Object.create(MyCarousel);
if (this.length) {
return this.each(function () {
carousel.init(options, this);
});
}
};
$.fn.myCarousel.defaults = {
duration_speed: 1000,
imgNames: [],
imgUrls: [],
widths: 0,
heights: 0,
index: 0,
isStop: 1,
len: 1,
show_infobar: true,
show_toolbar: true,
begin_play: false
};
})(jQuery);
然后编写轮播图的样式文件：
#myCarousel {
position: relative;
}
#myCarousel #prev, #next {
position: absolute;
display: none;
width: 20px;
height: 20px;
}
#myCarousel #prev, #next, #nav_prev, #nav_next, #nav_play:hover {
cursor: pointer;
}
#imgContainer {
margin: 0px;
padding: 0px;
}
#imgContainer li {
list-style-type: none;
display: none;
}
#infobar {
position: absolute;
background-color: #E5BF3D;
color: black;
z-index: 2000;
padding: 0 10px;
}
.img_nav {
text-align: right;
background-color: black;
width: auto;
height: 30px;
padding-right: 10px;
}
.img_nav img, select {
vertical-align: middle;
}
.img_nav #nav_prev, #nav_next {
width: 20px;
height: 20px;
}
.img_nav #nav_play {
width: 30px;
height: 30px;
}
最后在目标容器中调用myCarousel，传入自定义初始化参数就可以实现轮播效果了。
$("#photos").myCarousel({imgUrls: imgUrls, imgNames: imgNames});