您的位置：首页 > Web前端 > JQuery

jquery自己写的带左右箭头自动播放幻灯插件，简化

2014-11-13 15:33 344 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航