<!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>