写了一个小焦点图组件 就一个左右按钮 一共就几行代码 好用 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>

 

posted @ 2012-04-16 15:40  彭成刚  阅读(311)  评论(0)  编辑  收藏  举报