CSS代码：
[code]<style type=”text/css”>
*{ margin:0; padding:0;}
.wrap_tv_tit{ height:50px;margin-bottom:10px;}
.wrap_tv_tit_l{ float:left;}
.wrap_tv_tit_r{ float:right;}
.wrap_tv_tit_r span{background:yellow; margin-right:10px; cursor:pointer}
.wrap_tv{ border:1px solid red; height:140px; width:500px; overflow:hidden;}
li{ list-style-type:none; float:left; margin-right:25px;}
ul{ position:absolute; height:50px; width:2000px;}
.wrap_tv_bg{ position:relative;width:100%;}
.name{ display:block;}
.mun_page{ background:red;}
</style>[/code]
jquery部分：
[code]<script type=”text/javascript”>
$(function(){
var page = 1; //当前版面页码
$(‘div.wrap_tv_tit_l’).children(‘span’).eq(0).addClass(‘mun_page’); //默认当前页码高亮
$(‘.wrap_tv_tit_r span.r’).click(function(){ //点击右键时候
if(!$(this).parents(‘.wrap_tv’).find(‘ul’).is(‘:animated’)){ //当点击右移动时候，如果动画当前不动就满足以下条件；如果动画是正在处于动的状态还点了向右就不满足以下条件不继续追加；效果就是当点一次向右时候，必须等当前的动画移动完毕再去点的时候才有效果。
if(Math.ceil(($(this).parents(‘.wrap_tv’).find(‘ul li’).size())/4)==page){ <!–判断版面总数（其实是4）是否等于 当前页码数（其实也是4）–>
$(this).parents(‘.wrap_tv’).find(‘ul’).animate({‘left’:’0px’}); <!–如果到了最后一页，就返回到开始–>
page=1; <!–如果到了最后一页，说明page已经是4了，就要从新赋值page=1,这样才能保证继续循环点击–>
}else{
$(this).parents(‘.wrap_tv’).find(‘ul’).animate({‘left’:’-=’+$(this).parents(‘.wrap_tv’).width()+’px’});
page=page+1;
}
$(‘div.wrap_tv_tit_l’).children(‘span’).removeClass(‘mun_page’);
$(this).parents(‘.wrap_tv’).find(‘div.wrap_tv_tit_l’).children(‘span’).eq(page-1).addClass(‘mun_page’);
}
});
$(‘.wrap_tv_tit_r span.l’).click(function(){
if(page==1){
$(this).parents(‘.wrap_tv’).find(‘ul’).animate({‘left’:’-=’+500*3+’px’});
page=Math.ceil(($(this).parents(‘.wrap_tv’).find(‘ul li’).size())/4);
}else{
$(this).parents(‘.wrap_tv’).find(‘ul’).animate({‘left’:’+=’+$(this).parents(‘.wrap_tv’).width()+’px’});
page–;
}
$(‘div.wrap_tv_tit_l’).children(‘span’).removeClass(‘mun_page’);
$(this).parents(‘.wrap_tv’).find(‘div.wrap_tv_tit_l’).children(‘span’).eq(page-1).addClass(‘mun_page’);
});
});
</script>[/code]
html部分：
[code]<div class=”wrap_tv”>
<div class=”wrap_tv_tit”>
<div class=”wrap_tv_tit_l”><span>1</span> <span>2</span> <span>3</span> <span>4</span></div>
<div class=”wrap_tv_tit_r”><span class=”l”><<span class=”r”>></span> </span></div>
</div>
<div class=”wrap_tv_bg”>
<ul>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>111</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>222</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>333</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>444</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>555</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>666</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>777</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>888</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>999</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>qqq1</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>www</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>eee</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>rrr</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>ttt</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>yyy</a></li>
<li><a href=”#”><img alt=”” src=”images/logo.png” width=”100″ height=”50″ /></a><a class=”name”>uuu</a></li>
</ul>
</div>
</div>[/code]