写了一个小焦点图组件 就一个左右按钮 一共就几行代码 好用 sfocus
调用语句:sfocusBind("#sfocus","#btnLeft","#btnRight");
简简单单 就是最简单的功能
下载地址 https://files.cnblogs.com/pengpengsay/jqueryStudy.rar
<!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" /> <title>无标题文档</title> <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ $("#jQueryShowBtn").click(function(){$("#jQueryShowTxt").show();}); $("#jQueryHideBtn").click(function(){$("#jQueryShowTxt").hide();}); $("#jQueryToggleBtn").click(function(){$("#jQueryShowTxt").toggle();}); $("#jQueryShowBtn2").click(function(){$("#jQueryShowTxt2").show("slow");}); $("#jQueryHideBtn2").click(function(){$("#jQueryShowTxt2").hide("slow");}); $("#jQueryToggleBtn2").click(function(){$("#jQueryShowTxt2").toggle("fast")}); }); </script> </head> <body> <div> <h3>show(speed, [callback])</h3> <a id="jQueryShowBtn2">显示</a> <a id="jQueryHideBtn2">隐藏</a> <a id="jQueryToggleBtn2">转换</a> <a onclick="javascript:$('#jQueryShowTxt2').slideDown('fast');">slideDown</a> <a onclick="javascript:$('#jQueryShowTxt2').slideUp('fast');">slideUp</a> <a onclick="javascript:$('#jQueryShowTxt2').slideToggle('fast');">slideToggle</a> <a onclick="javascript:$('#jQueryShowTxt2').fadeIn('fast');">fadeIn</a> <a onclick="javascript:$('#jQueryShowTxt2').fadeOut('fast');">fadeOut</a> <a onclick="javascript:$('#jQueryShowTxt2').fadeTo('fast',0.25);">fadeTo</a> <a onclick="javascript:$('#jQueryShowTxt2').animate({width:'toggle'},'fast');">animate</a> <div id="jQueryShowTxt2" style="display:none; background-color:#f2f2f2;">show(speed, [callback])<br />三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000) </div> </div> <div> <h3>jQuery.show()/jQuery.hide()/jQuery.toggle()</h3> <a id="jQueryShowBtn">显示</a> <a id="jQueryHideBtn">隐藏</a> <a id="jQueryToggleBtn">转换</a> <div id="jQueryShowTxt" style="display:none; background-color:#f2f2f2;">jQuery.show()</div> </div><br /> <br /> <br /> <script> $(document).ready(function(){ function sfocusBind(focusId,btnLeftId,btnRightId){ $(focusId+" ul").width($(focusId+" ul li").width()*($(focusId+" ul li").length)); var sfocusCurr = 0; $(btnRightId).click(function(){ if(sfocusCurr < $(focusId+" ul li").length-1) { sfocusCurr++; $(focusId+" ul").animate({left:-sfocusCurr*$(focusId+" ul li").width()},"fast"); } }); $(btnLeftId).click(function(){ if(sfocusCurr > 0) { sfocusCurr--; $(focusId+" ul").animate({left:-sfocusCurr*$(focusId+" ul li").width()},"fast"); } }); } sfocusBind("#sfocus","#btnLeft","#btnRight"); sfocusBind("#sfocus2","#btnLeft2","#btnRight2"); }); </script> <style> .sfocusClass {overflow:hidden; position:absolute;} .sfocusClass ul{margin:0; padding:0; border:0; position:relative;} .sfocusClass ul li{list-style-type:none; float:left;} .btnLeftClass {} .bntRightClass {} </style> <table width="192" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="250"> <div><a id="btnLeft" style="cursor:pointer;">向左</a> <a id="btnRight" style="cursor:pointer;">向右</a></div> <div id="sfocus" class="sfocusClass" style="width:192px; height:192px;overflow:hidden;"> <ul> <li><img src="1.jpg" /></li> <li><img src="2.jpg" /></li> <li><img src="3.jpg" /></li> <li><img src="1.jpg" /></li> <li><img src="2.jpg" /></li> <li><img src="3.jpg" /></li> </ul> </div> </td> </tr> </table> <table width="192" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="250"><div><a id="btnLeft2" style="cursor:pointer;">向左</a> <a id="btnRight2" style="cursor:pointer;">向右</a></div> <div id="sfocus2" class="sfocusClass" style="width:192px; height:192px;overflow:hidden;"> <ul> <li><img src="1.jpg" /></li> <li><img src="2.jpg" /></li> <li><img src="3.jpg" /></li> <li><img src="1.jpg" /></li> <li><img src="2.jpg" /></li> <li><img src="3.jpg" /></li> </ul> </div></td> </tr> </table> </body> </html>
---------------------------------------------
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)