先上图，如果不是你要的效果，直接略过，不要浪费时间，选项卡定时循环播放，下面有文字描述，这里显示不出来，下边有下载链接，很简单的jquery效果
<!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>
<style type="text/css">
* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#404040;}
.tabs {
width:960px;
position:relative;
margin:0 auto;
top:100px;
}
.tabs ul{
list-style:none;
border: 1px solid rgb(215, 213, 201);
height: 25px;
}
.tabs ul li {
z-index:2;
font-size:12px;
//background:url(pic.gif) no-repeat;
width:158px;
height:25px;
line-height:25px;
text-align:center;
float:left;
margin-right:5px;
}
.tabs ul li.active {
//background-position:0 -25px;
background-color:#03C;
color:#fff;
}
.tabs ul li a{
text-decoration:none;
width:100%;
color:inherit;
display:block;
}
#tab_01, #tab_02, #tab_03 ,#tab_04, #tab_05{
position:absolute;
top:25px;
left:0;
width:940px;
height:300px;
border:1px solid #ace;
z-index:1;
margin:0 auto;
padding-top:20px;
}
#tab_02, #tab_03, #tab_04, #tab_05{ display:none;}
.pics_div .single_pic_div{
width:230px;
height:300px;
float:left;
margin-right:5px;
}
.pics_div .single_pic_div img{
width:220px;
height:220px;
border:none;
}
.last_single_pic_div{
margin-right:auto;
}
.pics_div .single_pic_div a{
display:block;
color: #FF7D86;
font-family: tahoma, arial, 宋体;
font-size: 12px;
text-align:center;
margin-bottom:10px;
text-decoration:none;
}
.pics_div .single_pic_div a:hover{
text-decoration:underline;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var tab_num = 1;
var timer_id = null;
function move_to_next_tab(){ //供定时器调用，自动转换，切换到下一个tab
if(tab_num == 5){ //穿入当前的tab，如果已经到达最后一个，则返回第一个
tab_num = 1;
}else{
tab_num = tab_num+1;
}
var tab_id= "0"+tab_num; //tab的标题id 即li标签
var show_div_id = "tab_0"+tab_num; //每个tab页对应的div
//alert(show_div_id);
$('.tabs div').hide();
$('#'+tab_id).siblings('li').removeClass('active').end().addClass('active');
$('#'+show_div_id).show().children('div').show();
}
$(document).ready(function() {
$('.tabs li').mouseover(function() {
var id= $(this).attr("id");
var show_div_id = "tab_"+id;
$('.tabs div').hide();
$(this).siblings('li').removeClass('active').end().addClass('active');
$('#'+show_div_id).show().children('div').show();
});
$('.tabs li,.single_pic_div').mouseenter(function(){ //当鼠标指针移动到元素上面的时候，暂停计时器
if(timer_id){
window.clearInterval(timer_id);
}
});
$('.tabs li,.single_pic_div').mouseleave(function(){
timer_id=window.setInterval(move_to_next_tab,3000); //鼠标离开恢复计时器
});
});
//循环启动，每隔3秒
timer_id=window.setInterval(move_to_next_tab,3000);
</script>
</head>
<body>
<div class="tabs">
<ul>
<!-- 默认第一个tab为激活状态 -->
<li class="active" id="01"><a href="javascript:void(0);">品种一</a></li>
<li id="02"><a href="javascript:void(0);">品种二</a></li>
<li id="03"><a href="javascript:void(0);">品种三</a></li>
<li id="04"><a href="javascript:void(0);">品种四</a></li>
<li id="05"><a href="javascript:void(0);">品种五</a></li>
</ul>
<div id="tab_01" class="pics_div">
<div class="single_pic_div" >
<a href="#"><img src="imgs/T1eO6fFjlXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a>
<a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a>
</div>
<div class="single_pic_div" >
<a href="#"><img src="imgs/T1eO6fFjlXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a>
<a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a>
</div>
<div class="single_pic_div" >
<a href="#"><img src="imgs/T1eO6fFjlXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a>
<a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a>
</div>
<div class="single_pic_div" style="margin-right:0px;">
<a href="#"><img src="imgs/T1eO6fFjlXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a>
<a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a>
</div>
</div>
<div id="tab_02" class="pics_div">
<div class="single_pic_div" >
<a href="#"><img src="imgs/T1qpCrFaVXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a>
<a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a>
</div>
<div class="single_pic_div" >
<a href="#"><img src="imgs/T1qpCrFaVXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a>
<a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a>
</div>
<div class="single_pic_div" >
<a href="#"><img src="imgs/T1qpCrFaVXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a>
<a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a>
</div>
<div class="single_pic_div" >
<a href="#"><img src="imgs/T1qpCrFaVXXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a>
<a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a>
</div>
</div>
<div id="tab_03" class="pics_div">
<div class="single_pic_div" >
<a href="#"><img src="imgs/T1Ux2zFmhbXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a>
<a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a>
</div>
<div class="single_pic_div" >
<a href="#"><img src="imgs/T1Ux2zFmhbXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a>
<a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a>
</div>
<div class="single_pic_div" >
<a href="#"><img src="imgs/T1Ux2zFmhbXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a>
<a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a>
</div>
<div class="single_pic_div" >
<a href="#"><img src="imgs/T1Ux2zFmhbXXXXXXXX_!!0-item_pic.jpg_220x220.jpg"/></a>
<a href="#">韩国代购*s071 复古大眼球韩国毛衣 个性时尚修身显瘦韩国毛衣</a>
</div>
</div>
<div id="tab_04">品种四</div>
<div id="tab_05">品种五</div>
</div>
</body>
</html>