自己写的jquery开发的面向对象的左右箭头12345大图淡入淡出的幻灯片代码 jquery - 前端开发之家

自己写的jquery开发的面向对象的左右箭头12345大图淡入淡出的幻灯片代码

时间：2013-07-28 22:43:21 来源：作者：

<!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;}
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_C1{ width: 300px; height: 150px; position: relative; margin: 0px auto; overflow:hidden;}
.fs_C1 ul{ position:relative;}
.fs_C1 ul li{ width: 300px; height: 150px; position:absolute; top:0px; left:0px; display:none}
.fs_C1 ul li.show{ display:block;}
.fs_C1 ul li i.mark{ background:#000; filter:alpha(opacity=60);opacity:0.6;width:300px; height:30px; display:block;position:absolute; bottom:0px; left:0px;}
.fs_C1 ul li span{ position:absolute; bottom:0px; left:8px; line-height:30px; display:block; color:#fff; font-size:14px;}
.fs_C1 ul img{width: 100%; height: 150px;}
.fs_C1 span.btn{ position:absolute; bottom:6px; right:6px;height:16px; line-height:16px;}
.fs_C1 span.btn a{display:inline-block; background:yellow; margin:0px 1px; width:10px;height:10px; font-family:Arial;}
.fs_C1 span.btn a.on,.fs_C1 span.btn a:hover{ background:red; color:#fff;}
.fs_C1 .prev,.fs_C1 .next{position:absolute; top:60px;  z-index:100; background:red; width:20px; height:20px; line-height:20px; display:block; color:#fff; text-align:center;}
.fs_C1 .prev{ left:10px;}
.fs_C1 .next{ right: 10px;}
</style>
<div class="fs_C1" id="wind_C1">
<ul>
<li class="show">
<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">a</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>
<span id="btn" class="btn cf">
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="on"></a>
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)"></a>
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)"></a>
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)"></a>
<a href="javascript:void(0)" _fcksavedurl="javascript:void(0)"></a>
</span>
<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_C1 = function(id,Btn,ulLi,prev,next,ms){  
    this.id = $(id);  
    this.Btn = $(Btn);  
    this.ulLi = $(ulLi);

this.prev = $(prev);  
    this.next = $(next);  
    this.nextTarget = 0;  
    this.autoTimer = null; 
	this.ms = ms; 
};  
fs_C1.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);  
    },  
    showSlides:function(index){  
        this.Btn.eq(index).addClass("on").siblings().removeClass("on");  
        this.ulLi.eq(index).fadeIn().siblings().fadeOut();  
    },  
    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;  
        }     
	},
    autoPlay:function(){  
        this.nextTarget++;  
        this.lastItem();    
        this.showSlides(this.nextTarget);  
    }     
}  
  
new fs_C1("#wind_C1","#btn a","#wind_C1 li","#prev","#next",3000).start();  
  
  
</script>
</body>
</html>