1、HTML结构（通用的组件结构）
<div class=”ui-slider” id=”shop-slide”>
<a href=”javascript:;” class=”icon-bg shop-slide-prev” id=”prev”></a>
<div class=”slide-content”>
<ul class=”slide-content-list” id=”move-content”>
<li class=”slide-content-list-item”>
<div class=”ui-shade”></div>
<div class=”ui-shade-text”></div>
</li>
</ul>
</div>
<a href=”javascript:;” class=”icon-bg shop-slide-next” id=”next”></a>
</div>
2、CSS样式（在不同页面展示可在单独页面定义）
.ui-slider {
overflow: hidden;
width: 625px;
margin: 15px auto 10px;
position: relative;
}
.icon-bg {
background: url(/affixes/images/skin_default/common_icon.png) no-repeat;
display: inline-block;
}
/*.ui-shade {
background: #f5f5f5;
bottom: 0;
height: 20px;
left: 0;
opacity: 0.7;
position: absolute;
width: 110px;
filter:alpha(opacity=70);
}*/
.ui-shade-text {
bottom: 0;
height: 20px;
left: 0;
line-height: 20px;
padding-left: 8px;
width: 102px;
color: #333;
background: #f5f5f5;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ui-slider a {
width: 18px;
height: 30px;
position: absolute;
top: 38px;
}
.slide-content {
width: 580px;
position: relative;
overflow: hidden;
margin: 0 auto;
height: 120px;
}
.slide-content-list-item {
float: left;
position: relative;
border: 1px solid #e6e6e6;
margin: 0 5px 0 0;
}
.slide-content-list-item img {
width: 110px;
height: 85px;
display: block;
}
.slide-content-list {
overflow: hidden;
}
.shop-slide-prev {
background-position: -60px -420px;
left: 0;
}
.shop-slide-prev:hover {
background-position: -40px -420px;
}
.shop-slide-next {
right: 0;
}
.shop-slide-next:hover {
background-position: 0px -420px;
}
.shop-slide-next {
float: right;
background-position:-20px -420px;
}
3、公用jQuery方法代码
;(function($) {
var defaults = {
/*
* 参数配置
* sliderNum : 滚动数量
* sliderEvent : 触发方式
* sliderSpeed : 移动速度
* sliderTime : 自动调用时间
* sliderAuto : 是否自动滚动
* */
sliderNum: 5,
sliderEvent: ‘click’,
sliderSpeed: “slow”,
sliderTime: 2000,
sliderAuto: false,
sliderWrap: “”
};
function Slider(options) {
this.options = $.extend({}, defaults, options);
/*
* this.prev : 上按钮
* this.next : 下按钮
* this.content : 移动块
* this.wrap : 默认取到第二层
* */
this.prev = $(“#” + this.options.prev);
this.next = $(“#” + this.options.next);
this.content = $(“#” + this.options.content);
this.wrap = this.options.sliderWrap ? $(“#” + this.options.sliderWrap) : this.content.parent().parent();
/*
* this.sliderWidth : 移动宽度
* */
var $item = this.content.find(“li”);
this.len = $item.length;
this.itemWidth = $item.eq(0).outerWidth(true);
this.sliderWidth = this.options.sliderNum * this.content.find(“li”).eq(0).outerWidth(true);
this.init();
}
Slider.prototype = {
init: function() {
this.bindEvent();
//给定宽度
this.content.width(this.len * this.itemWidth)
//自动滚动
this.options.sliderAuto ? this.sliderAuto() : false;
},
bindEvent : function() {
var self = this,
prev = this.prev,
next = this.next,
content = self.content,
sliderWidth = self.sliderWidth
sliderSpeed = this.options.sliderSpeed,
sliderEvent = this.options.sliderEvent;
//列表左移动
next.bind(sliderEvent, function() {
if (!content.is(“:animated”)) {
content.animate({
“marginLeft”: – sliderWidth
}, sliderSpeed, function() {
content.css({
“marginLeft”: 0
}).find(“li:lt(” + self.options.sliderNum + “)”).appendTo(content);
});
}
});
//列表右移动
prev.bind(sliderEvent, function() {
if (!content.is(“:animated”)) {
var _index = content.find(“li”).length – self.options.sliderNum – 1;
content.css({
marginLeft: – sliderWidth
});
content.find(“li:gt(” + _index + “)”).prependTo(content);
content.animate({
“marginLeft”: 0
},sliderSpeed);
}
});
},
sliderAuto : function() {
var self = this,
timer = null;
this.wrap.hover(function() {
clearInterval(timer);
},
function() {
timer = setInterval(function() {
if (!self.content.is(“:animated”)) {
self.content.animate({
“marginLeft”: – self.sliderWidth
},
function() {
self.content.css({
“marginLeft”: 0
}).find(“li:lt(” + self.options.sliderNum + “)”).appendTo(self.content);
});
}
},self.options.sliderTime)
}).trigger(“mouseleave”)
}
}
$.fn.Slider = function(options) {
return this.each(function() {
new Slider(options);
})
}
})(jQuery)
4、调用方法
<script type=”text/javascript”>
$(document).ready(function () {
$(“#shoppic-slide”).Slider({
“prev”:”pic_prev”,
“next”:”pic_next”,
“content”:”shoppic-move-content”,
“sliderAuto”: false,
“sliderNum”:3
});
});
</script>
