自己写的jquery开发的面向对象的左右小图左右箭头大图左右滚动的幻灯片代码 jquery - 前端开发之家

自己写的jquery开发的面向对象的左右小图左右箭头大图左右滚动的幻灯片代码

时间：2013-07-28 22:33:12 来源：作者：

<!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:underline;}
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}
.fs_B1{ width: 470px; height: 230px; position: relative; margin: 0 auto; overflow:hidden;zoom:1}
.fs_B1 ul.firstUl{ position:relative;}
.fs_B1 ul.firstUl li{ position:relative; float:left;}
.fs_B1 ul.firstUl img{width: 470px; height: 150px;}
.fs_B1 ul.firstUl li i.mark{ background:#000; filter:alpha(opacity=60);opacity:0.6;width:100%; height:30px; display:block;position:absolute; bottom:0px; left:0px;}
.fs_B1 ul.firstUl li span{ position:absolute; bottom:0px; left:8px; line-height:30px; display:block; color:#fff; font-size:14px; text-align:center;width:100%;}
.fs_B1 .prev,.fs_B1 .next{ position:absolute; bottom:0px;  z-index:100; background:red; width:30px; height:66px; line-height:66px; display:block; color:#fff; text-align:center}
.fs_B1 .prev{ left: 0px;}
.fs_B1 .next{ right: 0px;}
.fs_B1 ul.btn{ position:absolute; bottom:0px; left:35px;height:66px;}
.fs_B1 ul.btn img{ width:70px; height:64px;}
.fs_B1 ul.btn li{ float:left;background:#000; margin:0px 4px; border:1px solid #fff;}
.fs_B1 ul.btn li.on{ border:1px solid #c00;}
</style>
<div class="fs_B1" id="wind_B1">
<ul class="firstUl">
<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" />
<i class="mark"></i>
<span>刑释人员摔死女童？</span>
</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" />
<i class="mark"></i>
<span>文艺兵被妖魔化了吗</span>
</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" />
<i class="mark"></i>
<span>蒋介石在抗战期啥</span>
</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" />
<i class="mark"></i>
<span>后机器生态圈</span>
</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" />
<i class="mark"></i>
<span>预报温度为疑云</span>
</a>
</li>
</ul>
<ul id="btn" class="btn cf">
<li class="on">
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="on">
<img src="http://mat1.gtimg.com/joke/images/2_s.png" _fcksavedurl="http://mat1.gtimg.com/joke/images/2_s.png" />
</a>
</li>
<li>
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)">
<img src="http://mat1.gtimg.com/joke/images/2_s.png" _fcksavedurl="http://mat1.gtimg.com/joke/images/2_s.png" />
</a>
</li>
<li>
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)">
<img src="http://mat1.gtimg.com/joke/images/2_s.png" _fcksavedurl="http://mat1.gtimg.com/joke/images/2_s.png" />
</a>
</li>
<li>
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)">
<img src="http://mat1.gtimg.com/joke/images/2_s.png" _fcksavedurl="http://mat1.gtimg.com/joke/images/2_s.png" />
</a>
</li>
<li>
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)">
<img src="http://mat1.gtimg.com/joke/images/2_s.png" _fcksavedurl="http://mat1.gtimg.com/joke/images/2_s.png" />
</a>
</li>
</ul>
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" id="prev" class="prev">左</a>
<a href="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 fs_B1 = function(id,Btn,ul,li,prev,next,ms){
	this.id = $(id);
	this.Btn = $(Btn);
	this.ul = $(ul);
	this.ulLi = $(ul).find(li);
	this.ul.css("width",this.ulLi.eq(0).width()*this.ulLi.length + "px");
	this.prev = $(prev);
	this.next = $(next);
	this.nextTarget = 0;
	this.autoTimer = null;
	this.ms = ms;
};
fs_B1.prototype = {
	start:function(){
		var _this = this;
		this.Btn.each(function(){
			var index = _this.Btn.index(this);
			$(this).hover(function(){
				_this.nextTarget = index;
				_this.showSlides(index);
			})	
		});
		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);
	},
	prevFn:function(){
		this.nextTarget--;	
		if(this.nextTarget < 0){
			this.nextTarget = this.ulLi.length - 1;	
		}
		this.showSlides(this.nextTarget);
	},	
	nextFn:function(){
		this.nextTarget++;
		this.lastItem();
		this.showSlides(this.nextTarget);
	},
	lastItem:function(){
		if(this.nextTarget > this.ulLi.length - 1){
			this.nextTarget = 0;
		}	
	},
	showSlides:function(index){
		this.Btn.eq(index).addClass("on").siblings().removeClass("on");
		this.ul.animate({"left":-this.ulLi.eq(0).width()*index + "px"});
	},
	autoPlay:function(){
		this.nextTarget++;
		this.lastItem();	
		this.showSlides(this.nextTarget);
	}	
}

new fs_B1("#wind_B1","#btn li","#wind_B1 .firstUl","li","#prev","#next",3000).start();

</script>
</body>
</html>