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

Jquery代码：

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

        });

    });