公布一个原创的JQ图片切换效果 _Web前端

发布一个原创的JQ图片切换效果。
代码如下：
<!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=utf-8" />
<style>
body, div, form, img, ul, ol, li, dl, dt, dd, p { margin: 0; padding: 0; border: 0; }
ul, ol { list-style-type:none; }
img { border:none; }
input { font-family:"宋体", Verdana, Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { margin:0; padding:0; }
table { border-collapse:collapse; }
input { vertical-align:middle; }
a:link, a:visited { text-decoration:none; }
a:hover, a:active { text-decoration:underline; }
.fl { float:left; display:inline; }
.fr { float:right; display:inline; }
.cl { clear:left; }
.cr { clear:right; }
.cb { clear:both; }
.f12 { font-size:12px; }
.f14 { font-size:14px; }
.white { color:#fff; }
.blue { color:blue; }
.red { color:red; }
.bold { font-weight:bold; }
.tr { text-align:right; }
.tc { text-align:center; }
.tl { text-align:left; }
#round_pic { height:130px; margin-top:10px; *margin-top:12px;
overflow:hidden; }
#round_pic ul { width:137px; float:left; overflow:hidden; }
#round_pic ul li { height:30px; margin:2px 0 2px 2px; background:#a5a5a5; }
#round_pic ul li a { width:137px; display:block; height:30px; background-position:center; text-indent:-9999px; background-repeat:no-repeat; cursor:pointer; }
#round_pic ul li.hover { background:#b01f24; }
#round_pic ul li a.qingzi { background-image:url(http://www.dtonecn.com/test/images/qingzi.png); }
#round_pic ul li a.qinglv { background-image:url(http://www.dtonecn.com/test/images/qinglv.png); }
#round_pic ul li a.diy { background-image:url(http://www.dtonecn.com/test/images/diy.png); }
#round_pic ul li a.tejia { background-image:url(http://www.dtonecn.com/test/images/tejia.png); }
#round_pic div { width:620px; height:130px; float:right; display:block; position:relative; overflow:hidden; }
#round_pic div .img_L { position:absolute; width:475px;height:130px; }
#round_pic div .img_R { position:absolute; width:156px;height:130px; right:0; }
</style>
<title></title>
</head>
<body>
<div id="round_pic" style="width:760px">
  <ul>
    <li class="hover"><a class="qingzi">亲子装</a> </li>
    <li><a   class="qinglv">情侣装</a> </li>
    <li><a  class="diy">DIY专区</a> </li>
    <li><a   class="tejia">特价区</a> </li>
  </ul>
  <div><img src="http://www.dtonecn.com/test/images/12.jpg"   alt=" " class="img_L" title="1"  /><img src="http://www.dtonecn.com/test/images/13.jpg"   alt=" " class="img_R" title="1" /> </div>
  <div style="display:none;"><img src="http://www.dtonecn.com/test/images/12.jpg"   alt=" " class="img_L" title="2" /><img src="http://www.dtonecn.com/test/images/13.jpg"   alt=" " class="img_R" title="2" /> </div>
  <div style="display:none;"><img src="http://www.dtonecn.com/test/images/12.jpg"   alt=" " class="img_L"  /><img src="http://www.dtonecn.com/test/images/13.jpg"   alt=" " class="img_R" title="3" /> </div>
  <div style="display:none;"><img src="http://www.dtonecn.com/test/images/12.jpg"   alt=" " class="img_L"  /><img src="http://www.dtonecn.com/test/images/13.jpg"   alt=" " class="img_R" title="4" /> </div>
</div>

</body>
<script type="text/javascript" src="http://www.dtonecn.com/test/js/jquery-1.4.2.min.js" language="javascript"></script>
<script type="text/javascript"  language="javascript">

var  n = 0;
//取得li数量
var count = $("#round_pic li").size();
$("#round_pic li").click(function(){
		//取出当前索引值						  
		var i = $("#round_pic li").index($(this));
		n=i;
        if ($(this).attr("class") != "hover") {
			//初始化左右两张图片的位置
            $("#round_pic div").eq(i).find("img").eq(0).css("left", "-50px").end().eq(1).css("right", "-50px");
            $("#round_pic li.hover").removeClass("hover");
            $("#round_pic div:visible").hide();
            $(this).attr("class", "hover");
			//左右两张图片动画效果
            $("#round_pic div").eq(i).fadeIn().find("img").eq(0).animate({
                left: 0
            },
            "slow").end().eq(1).animate({
                right: 0
            },
            "slow");
			
			
        }
										  
});
var t = setInterval("picAuto()", 1000);
$("#round_pic li").hover(function(){clearInterval(t)}, function(){t = setInterval("picAuto()", 1000);});
function picAuto()
{
n = n >= (count - 1) ? 0 : ++n;
$("#round_pic li").eq(n).trigger('click');
}
</script>
</html>