<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<style type="text/css">
#slideBox{ width: 100%; height: 540px; overflow:hidden;position: relative;}
ul,li{padding: 0; margin: 0; width: 100%;}
li{ list-style: none;}
.slideImg{ height: 500px; overflow: hidden; position: relative;}
.slideImg li{position: absolute;}
.slideBtn{ position: absolute; bottom: 0;left: 30%;}
.slideBtn li{ display: block;float: left; cursor: pointer; width: 100px;height: 40px;background-color: #f60; border-right: 1px solid #fff;}
.slideBtn li.active{ background-color: #f00}
.leftRight{ position: absolute; width: 100%; top: 230px; z-index: 100}
.leftBtn{ float: left; color: #f00;}
.rightBtn{ float: right;color: #f00;}
</style>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
;(function($){
$.fn.slideCom=function(options){
var options=$.extend(this,options), i=0,timer;
this.each(function(){
var _this=$(this),
slideImg=_this.find(options.slideImg),
slideBtn=_this.find(options.slideBtn),
leftBtn=_this.find(options.leftBtn),
rightBtn=_this.find(options.rightBtn);
timer=setInterval(slideImgFun,options.times);
_this.hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(slideImgFun,options.times);
});
var slideImgFun=function(){
if(i==-2){i=options.slideLength-2}//重点注意
i+=1
if (i>=options.slideLength) {
i=0;
} else if (i<0) {
i=options.slideLength;
}
var lie=slideImg.eq(i);
lie.siblings().css("z-index",2);
lie.css("z-index",3).animate({"opacity":1},150,function(){
lie.siblings().css({"opacity":0.1,"z-index":1});
})
slideBtn.eq(i).addClass(options.elemClass).siblings().removeClass(options.elemClass);
};
slideBtn.on(options.elemType,function(){
slideBtn.removeClass(options.elemClass);
$(this).addClass(options.elemClass);
i=$(this).index()-1;
slideImgFun();
return false;
})
leftBtn.on(options.elemType,function(){
i-=2;
slideImgFun();
return false;
})
rightBtn.on(options.elemType,function(){
i+=0;
slideImgFun();
return false;
})
return this;
})
}
})(jQuery);
$(function()
{
$("#slideBox").slideCom({
slideImg:".slideImg li",
slideBtn:".slideBtn li",
elemClass:"active",
elemType:"click",
times:3000,
slideLength:$("#slideBox .slideImg li").length,
leftBtn:".leftBtn",
rightBtn:".rightBtn"
})
})
</script>
</head>
<body>
<div id="slideBox">
<ul class="slideImg">
<li style="z-index: 3;opacity: 1;"> <a href="#" target="_blank" title="" ><img src="images/1.jpg" alt="" /></a></li>
<li> <a href="#" target="_blank" title="" style=""><img src="images/2.jpg" alt="" /></a></li>
<li> <a href="#" target="_blank" title="" style=""><img src="images/3.jpg" alt="" /></a></li>
<li> <a href="#" target="_blank" title="" style=""><img src="images/4.jpg" alt="" /></a></li>
</ul>
<ul class="slideBtn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="leftRight"><a href="" class="leftBtn">左箭头</a><a href="" class="rightBtn">右箭头</a></div>
</div>
</body>
</html>
