自己写的jquery开发的面向对象的有按钮水平可停止滚动的横向滚动代码 jquery - 前端开发之家

自己写的jquery开发的面向对象的有按钮水平可停止滚动的横向滚动代码

时间：2013-07-28 22:47:00 来源：作者：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"   />
<title></title>
</head>
<body>
<style type="text/css">
body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select{margin:0;padding:0;}
body{font:12px "宋体","Arial Narrow",HELVETICA;-webkit-text-size-adjust:100%; color:#333;}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:none; color:#c00;}
em{font-style:normal;}
li{list-style:none;}
img{border:0;vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0;}
p{word-wrap:break-word;}
.cf:after{content:"";display:table;clear:both;}
.cf{*zoom:1;}
.fl{ float:left; _display:inline}
.fr{ float:right; _display:inline}
.windS1{ width:970px; position:relative; height:190px;}
.windS1 .w{ width:920px; overflow:hidden; position:absolute; top:0px; left:26px; height:190px;}
.windS1 ul{ position:absolute; top:0px; left:0px;width:9999px;}
.windS1 ul li{ float:left; width:310px; overflow:hidden; text-align:center; font-size:14px;}
.windS1 ul li img{ display:block; padding-bottom:13px;}
.windS1 a.prev,.windS1 a.next{ position:absolute; top:50px; display:block; width:20px; height:20px;background:red;}
.windS1 a.prev{ left:0px;}
.windS1 a.next{right:0px;}
</style>
<div class="windS1" id="windS1">
<div class="w">
<ul id="windS1Ul">
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/ln_xqnj.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/ln_xqnj.jpg" />
刑释人员摔死女童？
</a>
</li>
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_ybj.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_ybj.jpg" />
文艺兵被妖魔化了吗
</a>
</li>
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_xqnj.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_xqnj.jpg" />
蒋介石在抗战期啥
</a>
</li>
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" />
后机器生态圈
</a>
</li>
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" />
预报温度为疑云
</a>
</li>
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" />
后机器生态圈
</a>
</li>
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" />
预报温度为疑云
</a>
</li>
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" />
后机器生态圈
</a>
</li>
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" />
预报温度为疑云
</a>
</li>
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" />
后机器生态圈
</a>
</li>
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" />
预报温度为疑云
</a>
</li>
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/zs_pt.jpg" />
后机器生态圈
</a>
</li>
<li>
<a href="#" _fcksavedurl="#" target="_blank">
<img src="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" _fcksavedurl="http://mat1.gtimg.com/house/zhuanti/jiejing/1872_pt.jpg" />
最后一张
</a>
</li>
</ul>
</div>
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" _fcksavedurl="javascript:void(0)" id="prev" class="prev">左</a>
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" _fcksavedurl="javascript:void(0)" id="next" class="next">右</a>
</div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
<script>
var wind = function(id,w,ul,li,prev,next,ms){
	this.id = $(id);
	this.w = this.id.find(w);
	this.ul = $(ul);
	this.ulLi = this.ul.find(li);
	this.ul.css("width",parseInt(this.ulLi.css("width"))*this.ulLi.length + "px");
	this.prev = $(prev);
	this.next = $(next);
	this.nextTarget = 0;
	this.autoTimer = null;
	this.ms = ms;
};
wind.prototype = {
	start:function(){
		var _this = this;
		this.prev.click(function(){
			_this.prevFn();	
		});
		this.next.click(function(){
			_this.nextFn();	
		});
		this.id.hover(function(){
			clearInterval(_this.autoTimer);
		},function(){
			_this.autoTimer = setInterval(function(){
				_this.autoPlay();	
			},_this.ms);
		});
		clearInterval(this.autoTimer);
		this.autoTimer = setInterval(function(){
			_this.autoPlay();	
		},_this.ms);
	},
	showSlides:function(index){
		this.ul.animate({"left":-this.ulLi.width()*index + "px"})
	},
	prevFn:function(){
		this.nextTarget--;	
		if(this.nextTarget < 0){
			this.nextTarget = 0;	
		}
		this.showSlides(this.nextTarget);
	},	
	nextFn:function(){
		this.nextTarget++;
		this.lastItem();
		this.showSlides(this.nextTarget);
	},
	lastItem:function(){
		if(this.nextTarget > this.ulLi.length - parseInt(($(this.w).width()+10) / this.ulLi.width())){
			this.nextTarget = this.ulLi.length - parseInt(($(this.w).width()+10) / this.ulLi.width());
		}	
	},
	autoPlay:function(){
		this.nextTarget++;
		this.lastItem();	
		this.showSlides(this.nextTarget);
	}	
}

new wind("#windS1",".w","#windS1Ul","li","#prev","#next",3000).start();
</script>
</body>
</html>