jquery实现简单的轮播动画

css

           * {
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none;
            }           
            .slideShow {
                width: 620px;
                height: 700px;
                /*其实就是图片的高度*/
                border: 1px #eeeeee solid;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
                /*此处需要将溢出框架的图片部分隐藏*/
            }           
            .slideShow ul {
                width: 2500px;
                position: relative;
                /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
            }           
            .slideShow ul li {
                float: left;
                /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
                width: 620px;
            }           
            .slideShow .showNav {
                /*用绝对定位给数字按钮进行布局*/
                position: absolute;
                right: 10px;
                bottom: 5px;
                text-align: center;
                font-size: 12px;
                line-height: 20px;
            }   
            .slideShow .showNav span {
                cursor: pointer;
                display: block;
                float: left;
                width: 20px;
                height: 20px;
                background: #ff5a28;
                margin-left: 2px;
                color: #fff;
            }           
            .slideShow .showNav .active {
                background: #b63e1a;
      } 

html

        <div class="slideShow">
            <!--图片布局开始-->
            <ul>
                <li>
                    <a href="#"><img src="img/product1.png" /><img src="" /></a>
                </li>
                <li>
                    <a href="#"><img src="img/product2.png" /></a>
                </li>
                <li>
                    <a href="#"><img src="img/product3.png" /></a>
                </li>
                <li>
                    <a href="#"><img src="img/product4.png" /></a>
                </li>
            </ul>
            <!--图片布局结束-->

            <!--按钮布局开始-->
            <div class="showNav">
                <span class="active">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </div>
            <!--按钮布局结束-->
        </div>

js

$(document).ready(function() {
            var slideShow = $(".slideShow"), //获取最外层框架的名称     
            ul = slideShow.find("ul"),
            showNumber = slideShow.find(".showNav span"), //获取按钮          
            oneWidth = slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度          
            var timer = null; //定时器返回值，主要用于关闭定时器          
            var iNow = 0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0                          
            showNumber.on("click", function() { //为每个按钮绑定一个点击事件                   
            $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉              
            var index = $(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值              
            iNow = index;
            ul.animate({
                "left": -oneWidth * iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定            
                })
            });

            function autoplay() {
                timer = setInterval(function() { //打开定时器             
                iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片             
                if(iNow > showNumber.length - 1) { //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始                  
                        iNow = 0;
                    }
                    showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click          
                }, 2000); //2000为轮播的时间  
            }
            autoplay();
            slideShow.hover(function() {
                clearInterval(timer);
            }, autoplay);
        })