html代码
<div class="r_list r_1" style="display:block;"> <div class="min_box"> <ul class="slider_con"> <li> <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a> <div class="shop_name"> <a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a> </div> <b>¥12312</b> <a href="javascript:;" class="join_car">加入购物车</a> </li> <li> <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a> <div class="shop_name"><a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a></div> <b>¥12312</b> <a href="javascript:;" class="join_car">加入购物车</a> </li> <li> <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a> <div class="shop_name"><a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a></div> <b>¥12312</b> <a href="javascript:;" class="join_car">加入购物车</a> </li> <li> <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a> <div class="shop_name"><a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a></div> <b>¥12312</b> <a href="javascript:;" class="join_car">加入购物车</a> </li> <li> <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a> <div class="shop_name"><a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a></div> <b>¥12312</b> <a href="javascript:;" class="join_car">加入购物车</a> </li> <li> <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a> <div class="shop_name"><a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a></div> <b>¥12312</b> <a href="javascript:;" class="join_car">加入购物车</a> </li> <li> <a href="#" class="r_img"><img src="img/temp/r_img02.jpg" alt=""></a> <div class="shop_name"><a href="#">施华洛世奇(Swarovski)Octea Chrono系列</a></div> <b>¥12312</b> <a href="javascript:;" class="join_car">加入购物车</a> </li> </ul> </div> <div class="s_btn"> <span class="prev_btn"></span> <span class="next_btn"></span> </div> </div>
JS调用
$(‘.flash_box .r_1‘).slider({});
JS插件代码
/** * * @authors Your Name ([email protected]) * @date 2015-06-12 09:40:14 * @version $Id$ */ (function($){ $.fn.slider=function(opts){ opts=$.extend({}, $.fn.slider.opts, opts); var _this=this; _this.opts=opts; _this.ie6 = (!!window.ActiveXObject)&&!window.XMLHttpRequest; return _this.each(function(){ var wrap = $(this).find(_this.opts.containerClass); var sLi = wrap.find(‘li‘); var that = this; var $that = $(this); var index = 0; var time = null; that.count = sLi.length; // next $that.find(_this.opts.nextClass).on(‘click‘, function(event) { if (_this.opts[‘isAnimate‘] == true) return false; if (index >= that.count-_this.opts.showNum) { index=that.count-_this.opts.showNum; }else{ index++; } change.call(that, _this,index,‘next‘); return false; }); // prev $that.find(_this.opts.prevClass).on(‘click‘, function(event) { if (_this.opts[‘isAnimate‘] == true) return false; if(index <= 0){ index = 0; }else{ index--; } change.call(that, _this,index,‘prev‘); return false; }); $that.find(_this.opts.boxClass+‘ li‘).each(function(cindex) { $(this).on(‘click‘+_this.opts.boxClass, function(event) { change.call(that,_this,cindex,‘box‘); // index=cindex; return false; }); }); // focus clean auto play $that.on(‘mouseover‘, function(event) { if (_this.opts.autoPlay) { clearInterval(time); } if (_this.opts.btnHover) { $that.find(_this.opts.arrowClass).removeClass(‘hide‘); } }); // leave $that.on(‘mouseleave‘, function(event) { if (_this.opts.autoPlay) { startAutoPlay(); }; if (_this.opts.btnHover) { $that.find(_this.opts.arrowClass).addClass("hide"); } }); startAutoPlay(); //auto play function startAutoPlay(){ if(_this.opts.autoPlay){ time=setInterval(function(){ if (index >= that.count-_this.opts.showNum) { index = 0; }else{ index++; } change.call(that, _this, index, ‘auto‘); }, _this.opts.autoPlayTime); } } // box var boxLi = $that.find(_this.opts.boxClass+ ‘ ul li‘); var boxWidth = boxLi.outerWidth(true)*boxLi.length; if (_this.ie6) { $that.find(_this.opts.boxClass).css({ ‘width‘:boxWidth }) } $that.find(_this.opts.boxClass).css({ ‘margin-left‘: -(boxWidth/2) }); //ul、li宽 _this.opts[‘width‘] = sLi.outerWidth(); wrap.css(‘width‘, sLi.length*sLi.outerWidth()); }) } function change(_this,num,tag){ var that=this; var $that=$(this); var x = num * _this.opts[‘width‘]; if (_this.opts.showNum>=that.count) { return false; } $that.find(_this.opts.boxClass + ‘ li‘).eq(num).addClass(‘sel‘).siblings().removeClass(‘sel‘); $that.find(_this.opts.containerClass).stop().animate({‘margin-left‘:-x}, _this.opts.speed, function(){ _this.opts[‘isAnimate‘] = false; }); _this.opts[‘isAnimate‘] = true } $.fn.slider.opts={ autoPlay: false, autoPlayTime: 2000, speed: 400, containerClass: ‘.slider_con‘, boxClass: ‘.l_btn‘, arrowClass: ‘.s_btn‘, nextClass: ‘.next_btn‘, prevClass: ‘.prev_btn‘, isAnimate: false, showNum: 5, btnHover: false } })(jQuery);
时间: 2024-10-29 00:50:20