指定标签页滚动

break_happy 2011-09-12 06:03:23

这是层循环滚动，方法很简单从别的地方看到，每次移动一个li宽度的ul，然后结束时，返回函数将：ul的重设为0，将第一li放到最后一位。我现在想知道，如果我想有标签页的功能，点第几个标签就滚到第几个层（不点击时仍然循环滚动），应该怎么做，不需要写出来，请告诉我大致的方法就行。

<!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" />
<title>无标题文档</title>
<script language="javascript" src="../jquery1.5.min.js"></script>
<script language="javascript">
$(document).ready(function(){
var Scroll=function(){
var _scroll=$('.outside>ul')
_scroll.animate({left:'-300px'},1000,function(){
_scroll.css({left:'0px'})
_scroll.find('li:first').appendTo(_scroll)
})
}
var auto_scroll=setInterval(Scroll,2000)
$('.outside').hover(function(){
window.clearInterval(auto_scroll)
}, function(){
auto_scroll=setInterval(Scroll,2000)
})

})
</script>
<style type="text/css">

.outside{
position:absolute;
left:300px;
top:300px;
border:1px solid #F00;
overflow:hidden;
width:300px;
height:200px;
overflow:scroll;
}
.outside>ul{
position:relative;
padding:0px 0px;
margin:0px 0px;
list-style:none;
width:900px;
height:200px;
}
.outside>ul>li{
float:left;}
.outside>ul>li>img{
display:block;
width:300px;
height:200px;}
</style>
</head>

<body>
<div class="outside">
<ul>
<li><img src="../image/007.jpg" /></li>
<li><img src="../image/640x440_carbon-preview.jpg" /></li>
<li><img src="../image/123.png" /></li>
</ul>
</div>
</body>
</html>

...全文