左右图文切换(封装插件)

2013-06-27 11:06 5140 次阅读分类: JS+jQuery, 前端相关已关闭评论

免打扰阅读

jq实现左右图文切换显示，可直接点运行按钮查看效果！

按自己需要写的,效果比较简单，作了简单的封装处理，做成jq插件形式，支持多实例化!

也许哪天你有这样的需求，直接拿来用，省事快捷！感觉有用的，你会果断收藏吗？收藏了，你会告诉我吗，会吗... ^_^

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题页面</title>  <script src="https://img1.yaowan.com/templets/comm/js/jquery-1.8.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //实例描述文字前加序号标示! $(".description >h3").each(function(index, element) { var $index=index+1; $(this).prepend("<b style='color:#f00;'>"+$index+"、</b>"); }); }) </script> <style type="text/css"> *{margin:0;padding:0;} body{font:13px/1.8 "SimSun";} .fl{float:left;} .demonstrate{width: 800px;padding: 20px;margin: 10px auto;border: 1px #bbb solid;border-radius: 5px;} .description h3{color:#f00;padding-bottom:8px;} .description p{padding-bottom:5px;} .description strong{color:#080; border-bottom:1px dotted;} .box{width:285px; border:1px red solid;} .winners_inner,.winners_innerab{width:232px;overflow:hidden;} .prev,.pr{display:block;float:left;} .next,.ne{display:block;float:right;} </style> </head> <body>  <div class="demonstrate"> <div class="description"> <h2>左右图文切换(封装插件)</h2> <h3>默认不循环切换：<br />$(obj).scrAnimate()</h3> <div class="box"> <a href="javascript:;" class="prev">向前</a> <a href="javascript:;" class="next">向后</a> <div class="winners_inner"> <ul class="winners_inner2"> <li class="fl" style="width:232px;height:100%; background:#0FC"> <h2>第1屏</h2> </li> <li class="fl" style="width:232px;height:100%; background:#f00"> <h2>第2屏</h2> </li> <li class="fl" style="width:232px;height:100%; background:#0F9"> <h2>第3屏</h2> </li> </ul> </div> </div> <h3>循环切换显示，自定义循环切换按钮class||id：<br />$(obj).scrAnimate({circular:true,btnNext:'.ne',btnPrev:'.pr'})</h3> <div class="box"> <a href="javascript:;" class="pr">向前</a> <a href="javascript:;" class="ne">向后</a> <div class="winners_innerab"> <ul class="winners_inner2"> <li class="fl" style="width:232px;height:100%; background:#0FC"> <h2>第1屏</h2> </li> <li class="fl" style="width:232px;height:100%; background:#f00"> <h2>第2屏</h2> </li> <li class="fl" style="width:232px;height:100%; background:#0F9"> <h2>第3屏</h2> </li> </ul> </div> </div> </div> </div> <script type="text/javascript"> (function($){ $.fn.extend({ scrAnimate:function(options){ /* 默认配置 * circular：点击btnPrev切换到第1张是否转至最后一张&点击btnNext切换到最后一张是否转至第1张,默认为false，不响应上述动作 * 向前翻页切换：btnPrev & 向前翻页切换：btnNext 可自定义class||id,默认依次为".prev & .next" */ var defaults={circular:false,btnNext:'.next',btnPrev:'.prev'}; var opts=$.extend(defaults,options); var _this=this; var obj=this.attr("id")?"#"+this.attr("id"):"."+this.attr("class"); var len=$("ul >li",this).length; var scrChild=$("ul >li",this).width(); var n=0; var circular=opts.circular; //$(".winners_inner2").css("marginLeft",-scrChild*n); var scrAction=function(){ $("ul",_this).animate({ marginLeft:-scrChild*n },{duration:200}) } $("ul",this).width(scrChild*len); $(opts.btnNext+","+opts.btnPrev).click(function(){ //console.log(this.innerHTML); if(!$("ul",this).is(":animated")){ if($(this).filter(".next").length!=0){ n++; if(n>=len){ circular?(n=0,scrAction()):n=len-1;return console.log("已到最后1列");; }else{ scrAction(); } }else{ n--; if(n<0){ circular?(n=len-1,scrAction()):n=0;return console.log("已到第1列"); }else{ scrAction(); } } } }) } }) })(jQuery); $(".winners_inner").scrAnimate(); $(".winners_innerab").scrAnimate({circular:true,btnNext:'.ne',btnPrev:'.pr'}); </script> </body> </html>

提示：你可以先修改部分代码再运行。