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 (you@example.org)
* @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);