<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset="utf-8" />
<title>图片滚动</title>
<link rel="stylesheet" href="style/mystyle.css" rel="external nofollow" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script>
var nowcontentleft=0;
var nowindex=0;
var awidth=180;
$(function(){
$('.tab a').click(function(){
var index = $(".tab a").index(this);
showPic(index);
});
$('.innerCon').hide();
$('.now').show();
});//$
function showPic(index){
if(nowindex==index)
return ;
nowindex=index;
//$('.now').hide('slow');
$('a').removeClass('now');
$('a:eq('+index+')').addClass('now');
$('.innerCon:eq('+index+')').show(1000);
//设置导航条的背景偏移。
$('.tab').css("background-position","0px -"+nowindex*47+"px");
}
</script>
</head>
<body>
<div class="middle">
<div class="warpper">
<div class="tab" id="tab">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >模板王</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >html</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >css</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >js</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >jquery</a>
</div>
<div class="content" id="content">
<div id="con1" class="innerCon now"><img src="images/hu.jpg" /></div>
<div id="con2" class="innerCon"><img src="images/hu2.jpg" /></div>
<div id="con3" class="innerCon"><img src="images/hu3.jpg" /></div>
<div id="con4" class="innerCon"><img src="images/hu4.jpg" /></div>
<div id="con5" class="innerCon"><img src="images/he.jpg" /></div>
</div>
</div>
</div>
</body>
</html>
