共计 3533 个字符，预计需要花费 9 分钟才能阅读完成。
效果地址
HTML
<div id=”slider” class=”slider”></div>
<script>
$(function () {
$(‘#slider’).sliders({
imgArr: [‘./resource/banner1.jpg’, ‘./resource/banner2.jpg’, ‘./resource/banner3.jpg’],
autoLoop: true,
current: 1,
time: 4000,
vWidth: 824
})
});
</script>
css
JS 代码
;(function ($, window, document, undefined) {
‘use strict’;
function Sliders(element, options) {
this.element = element;
this.options = {
vWidth: options.vWidth || element.width(),
current: options.current || 1,
imgArr: options.imgArr,
len: options.imgArr.length,
autoLoop: options.autoLoop,
time: options.time || 4000
};
this.init();
}
Sliders.prototype = {
constructor: Sliders,
init: function () {
this.createHtml();
this.bindEvent();
this.hackLoop();
},
createHtml: function () {
var me = this;
var content = [];
var imgArr = me.options.imgArr,
len = me.options.len,
current = me.options.current;
content.push(“<button type=’button’ class=’preBtn’ id=’preBtn’> 上 </button>”);
content.push(“<button type=’button’ class=’nextBtn’ id=’nextBtn’> 下 </button>”);
content.push(“<ul class=’sliderUl’>”);
for (var i = 0; i < len; i++) {
content.push(“<li class=’sliderLi’><img class=’block’ src=” + imgArr[i] + “>” + i + “</li>”)
}
content.push(“<li class=’sliderLi’><img class=’block’ src=” + imgArr[0] + “>” + i + “</li></ul>”);
content.push(“<ul class=’pointer’>”);
for (var i = 1, len1 = len + 1; i < len1; i++) {
if (current !== i) {
content.push(“<li data-index=” + i + “></li>”);
} else {
content.push(“<li class=’current’ data-index=” + i + “></li>”);
}
}
content.push(“</ul>”);
me.element.html(content.join(”));
},
bindEvent: function () {
var me = this;
me.element.on(‘mouseenter’, ‘.sliderUl’, function () {
clearInterval(me.timer);
});
me.element.on(‘click’, ‘.pointer li’, function () {
clearInterval(me.timer);
var index = parseInt($(this).data(‘index’));
me.goPage(index);
});
me.element.on(‘mouseleave’, ‘.sliderUl’, function () {
me.hackLoop();
});
me.element.on(‘click’, ‘#preBtn’, function () {
clearInterval(me.timer);
var i = me.options.current, len = me.options.len;
me.options.current = –i === 0 ? len-1 : i-1;
me.loop();
});
me.element.on(‘click’, ‘#nextBtn’, function () {
clearInterval(me.timer);
var i = me.options.current, len = me.options.len;
me.options.current = i === len ? 0 : i;
me.loop();
});
},
loop: function () {
var me = this;
var i = me.options.current, vWidth = me.options.vWidth, len = me.options.len;
console.log(i);
me.element.children(‘.sliderUl’).css({
“-webkit-transform”: “translateX(” + (-i * vWidth) + “px)”,
“transform”: “translateX(” + (-i * vWidth) + “px)”,
“transition-duration”: “0.4s”,
“transition-timing-function”: “ease-in”,
“transition-property”: “transform”
});
me.element.children(‘.pointer’).children(“li”).removeClass(“current”);
me.element.children(‘.pointer’).children(“li”).eq(i === len ? 0 : i).addClass(“current”);
if (me.options.current === len) {
setTimeout(function () {
me.element.children(‘.sliderUl’).css({
“-webkit-transform”: “translateX(0px)”,
“transform”: “translateX(0px)”,
“transition-duration”: “none”,
“transition-timing-function”: “none”,
“transition-property”: “none”
});
// 时间必须不小于动画所需时间
}, 400);
}
me.options.current = (len !== i) ? ++i : 1;
},
hackLoop: function () {
var me = this;
if (me.options.autoLoop) {
me.timer = setInterval(function () {
me.loop();
}, me.options.time);
}
},
goPage: function (index) {
var me = this;
var vWidth = me.options.vWidth;
me.options.current = index;
me.element.children(‘.sliderUl’).css({
“-webkit-transform”: “translateX(” + (-(index – 1) * vWidth) + “px)”,
“transform”: “translateX(” + (-(index – 1) * vWidth) + “px)”,
“transition-duration”: “0.4s”,
“transition-timing-function”: “ease-in”,
“transition-property”: “transform”
});
me.element.children(‘.pointer’).children(“li”).removeClass(“current”);
me.element.children(‘.pointer’).children(“li”).eq(index – 1).addClass(“current”);
}
};
$.fn.sliders = function (options) {
return new Sliders($(this), options);
}
})(jQuery, window, document);