<style>
.slidePanel{
}
.sildeContainer{
display:block;
width:300px;
height:300px;
overflow: hidden;
}
.sildeContainer ul{
list-style-type: none;
margin: 0px;
padding: 0px;
width: 5000px;
}
.sildeContainer ul li{
float: left;
width:300px;
height:300px;
}
.sildeContainer ul li img{
width: 300px;
height:300px;
}
</style>
<div id="slidePanel" class="slidePanel">
<div class="sildeContainer">
<ul class="slideList">
<li><img src="images/1364791236f951.jpg"/></li>
<li><img src="images/136479026399c7.jpg"/></li>
<li><img src="images/13647951670de4.jpg"/></li>
<li><img src="images/136479616600ee.jpg"/></li>
<li><img src="images/1364795402308b.jpg"/></li>
<li><img src="images/1364791236f951.jpg"/></li>
<li><img src="images/13647982102730.jpg"/></li>
<li><img src="images/1364791236f951.jpg"/></li>
</ul>
</div>
<div class="sildeNav"><a href="javascript:;" class="J_slidePre">上一个</a><a href="javascript:;" class="J_sildeNext">下一个</a></div>
</div>
<script>
window.slide=(function(){
function _scrollPanel(obj)
{
this.cur_index=0;
this.offset=300;
this.itemnum=0;
this.target=null;
this.target=obj.target;
this._init();
}
_scrollPanel.prototype._init=function()
{
var _this=this;
this.itemnum=$(".slideList li",_this.target).length;
$(".J_slidePre",_this.target).click(function(){
_this.cur_index=_this.cur_index>0?(_this.cur_index-1):(_this.itemnum-1);
$(".slideList",_this.target).animate({
marginLeft:-1*_this.cur_index*_this.offset
},"normal");
});
$(".J_sildeNext",_this.target).click(function(){
_this.cur_index=_this.cur_index<(_this.itemnum-1)?(_this.cur_index+1):0;
$(".slideList",_this.target).animate({
marginLeft:-1*(_this.cur_index)*_this.offset
},"normal");
});
}
return {
scrollPanel:_scrollPanel
}
})();
new window.slide.scrollPanel({target:$("#slidePanel")});
</script>