基于Jquery实现的一个图片滚动切换

首先还是要引用jquery框架的。

然后开始HTML代码：

<div id="New_zlMimgMv"> 
<div class="imgMvBox"> 
<ul id="imgMvCon"> 
<li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li> 
<li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li> 
<li><a href="#" title=""><img src="New_zlimgMv.jpg" alt="" /></a></li> 
</ul> 
</div> 
<div class="imgMvNum"> 
<a href="javascript:;">专业问答平台</a> 
<a href="javascript:;" style="width:206px;">啊是发达庵圣坊但是分开就</a> 
<a href="javascript:;">同城阿萨德业动</a> 
</div> 
</div> 

再然后看看CSS（大家也可以直接看JS的）：

复制代码代码如下:

ul,img,li,a{ 
border:0; 
margin:0; 
padding:0; 
list-style:none; 
} 
#New_zlMimgMv { 
border: 1px solid #B8B8B8; 
height: 192px; 
margin-bottom: 12px; 
width: 446px; 
} 
#New_zlMimgMv .imgMvBox, #New_zlMimgMv .imgMvBox img { 
height: 160px; 
width: 446px; 
} 
#New_zlMimgMv .imgMvBox { 
overflow: hidden; 
} 
#New_zlMimgMv .imgMvNum a { 
background: #E6E6E6; 
display: block; 
float: left; 
height: 32px; 
line-height: 32px; 
text-align: center; 
text-decoration: none; 
width: 120px; 
color:#282828; 
} 
#New_zlMimgMv .imgMvNum a.changeThis { 
background: #A29F9F; 
color: #FFFFFF; 
} 

最后是JQ代码了：

复制代码代码如下:

　　var imgLength=$("#imgMvCon li").length;//获取需滚动元素总数 
var imgHeight=$("#imgMvCon li").height();//获取需滚动元素高度 
var totalHeight=imgLength*imgHeight;//获取需滚动元素总高度 
var mvul=$("#imgMvCon"); 
var positiontop=0;//定义一个初始偏移位置0var linknum=0;//定义一个用于控制按钮切换索引的初始值 
var mvTimer;//设置一个定时器 
mvul.parent().css({"position":"relative"})//设置容器的CSS 
mvul.css({"position":"absolute"});//同上 
$(".imgMvNum a").eq(linknum).addClass("changeThis");//给第一个按钮添加样式 
function imgMv(){ 
if(imgLength>1)//如果不是一张图片的话就执行下面的 
{ 
positiontop=positiontop+imgHeight;//没执行一次便宜位置加一次高度 
if(positiontop==totalHeight)//如果偏移值等于总高度将偏移值设回0 
{ 
positiontop=0; 
} 
linknum++;//运行一次，用于控制按钮切换的索引加1 
if(linknum>=imgLength)//如果索引大于或等于滚动元素总长度，将索引设回0 
{ 
linknum=0; 
} 
mvul.animate({top:-(linknum*imgHeight)},400);//用animate属性实现滚动,'linknum*imgHeight'方便和按钮同步 
$(".imgMvNum a").removeClass("changeThis");//移除样式 
$(".imgMvNum a").eq(linknum).addClass("changeThis");//添加样式 
} 
} 
function startMv(){ 
mvTimer=setInterval(imgMv,4000);//定时器函数 
} 
startMv();//运行定时器 
$(".imgMvNum a").each(function(){//遍历按钮 
$(this).mouseover(function(){//鼠标经过按钮 
clearInterval(mvTimer);//清除定时器 
linknum=$(this).index();//鼠标经过按钮将linknum设置为当前按钮索引 
$(".imgMvNum a").removeClass("changeThis"); 
$(this).addClass("changeThis"); 
mvul.animate({top:-(linknum*imgHeight)},300);//用animate属性实现滚动,'linknum*imgHeight'方便和按钮同步 
}).mouseout(function(){ 
startMv();//鼠标移出再次执行定时器 
}); 
}); 