调用语句：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({'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="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="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>