;(function($){ var xslider = function(el, userconfig) { var _this = this this.el = el // 参数配置 this.userconfig = userconfig this.config = { w: this.el.width(), current: 0, speed: 500, intervaltime: 5000 } if(userconfig != null) { $.extend(this.config,this.userconfig); } // 保存查找dom元素 var slider_img = this.el.children('.slider-img') var slider_img_ul = slider_img.children('ul') var slider_img_ul_li = slider_img_ul.children('li') // 初始化左右按钮 this.el.append('<') this.el.append('>') var slider_btn_left = this.el.children('.slider-btn-left') var slider_btn_right = this.el.children('.slider-btn-right') // 初始化圆点 this.el.append('
') var slider_dot = this.el.children('.slider-dot') var slider_dot_ul = slider_dot.children('ul') var slider_img_length = slider_img_ul_li.length for (var i = 0; i < slider_img_length - 2; i++) { if(i === this.config.current){ slider_dot_ul.append('
  • ') } else { slider_dot_ul.append('
  • ') } } var slider_dot_ul_li = slider_dot_ul.children('li') // 初始化默认显示图片位置 slider_img_ul.css('left', - this.config.w * this.config.current - this.config.w) // 圆点切换点亮 var active = function(i) { slider_dot_ul_li.removeclass('active') slider_dot_ul_li.eq(i).addclass('active') } // 右点击事件 slider_btn_right.on('click', function(event) { event.preventdefault() if(_this.config.current < slider_img_length - 2){ toggleinterval () _this.config.current ++ if(_this.config.current != slider_img_length - 2) { slider_img_ul.stop(true, false).animate({left: - _this.config.w * _this.config.current - _this.config.w}, _this.config.speed, function () { active(_this.config.current) }) } if (_this.config.current === slider_img_length - 4) { slider_img_ul.stop(true, false).animate({left: - _this.config.w * _this.config.current - _this.config.w}, _this.config.speed, function() { slider_img_ul.css('left', - _this.config.w) _this.config.current = 0 active(_this.config.current) }) } } }) // 左点击事件 slider_btn_left.on('click', function(event) { event.preventdefault() if(_this.config.current > -1){ toggleinterval () _this.config.current -- if(_this.config.current != -1){ slider_img_ul.stop(true, false).animate({left: - _this.config.w * _this.config.current - _this.config.w}, _this.config.speed, function() { active(_this.config.current) }) } if(_this.config.current === -1){ slider_img_ul.stop(true, false).animate({left: 0}, _this.config.speed, function() { slider_img_ul.css('left', - _this.config.w * (slider_img_length - 4)) _this.config.current = slider_img_length - 5 active(_this.config.current) }) } } }) // dot点击事件 slider_dot_ul_li.on('click', function(event) { event.preventdefault() toggleinterval () var index = $(this).index() active(index) slider_img_ul.stop(true, false).animate({left: - _this.config.w * index - _this.config.w}, _this.config.speed, function() { _this.config.current = index }) }) // 自动切换 var sliderint = setinterval(sliderinterval, _this.config.intervaltime) // 判断图片切换 function sliderinterval() { if (_this.config.current < slider_img_length - 4) { _this.config.current ++ slider_img_ul.stop(true, false).animate({left: - _this.config.w * _this.config.current - _this.config.w}, _this.config.speed, function() { active(_this.config.current) if (_this.config.current === slider_img_length - 4) { slider_img_ul.css('left', - _this.config.w) _this.config.current = 0 active(_this.config.current) } }) } } // 重置计时器 function toggleinterval () { clearinterval(sliderint) sliderint = setinterval(sliderinterval, _this.config.intervaltime) } } // --end-- xslider $.fn.extend({ xslider: function() { new xslider($(this)) } }) })(jquery) var config = { current: 0, speed: 500, intervaltime: 2000 } $('.slider').xslider(config)