首页 > 代码库 > jquery自己写的幻灯片插件，好用不解释
jquery自己写的幻灯片插件，好用不解释
<!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} </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); timer=setInterval(slideImgFun,options.times); _this.hover(function(){ clearInterval(timer); },function(){ timer=setInterval(slideImgFun,options.times); }); var slideImgFun=function(){ i+=1; if(i==options.slideLength){i=0}; 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; }) return this; }) } })(jQuery); $(function() { $("#slideBox").slideCom({ slideImg:".slideImg li", slideBtn:".slideBtn li", elemClass:"active", elemType:"click", times:3000, slideLength:$("#slideBox .slideImg li").length }) }) </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> </body></html>
jquery自己写的幻灯片插件，好用不解释
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。