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

每句都注释清楚了哈。这里只是简单的写了个简单的向上效果，代码可能也不优化。主要是给大家参考和提供思路。

大家可以把这些效果封装成插件，再编写一些其它的方向或效果。

 看下效果（这个文章里面样式没法完全放进来，大家可以复制到自己电脑）：