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

　　<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>

　　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;

　　}

　　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();//鼠标移出再次执行定时器

　　});

　　});