效果地址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>cssJS代码;(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);
...