jquery 无缝轮播

思路: 先静态布局,设置一个变量为下标,利用jquery的选择器获取点击的所有li,获取宽,
再写上下页的封装函数(进行下标的++,根据当前的下标判断是不是最后一张,
(做一些动画效果,先停止动画一次),最后一张就把下标设置为0;跳到第一张,不是最后一张,根据left值改变图片的显示);
获取所有点击的li,添加点击事件,先清空所有,获取当前的下标,根据下标添加类名,再添加一个切换的动画(先停止一次)

1.html部分

<div id="box">
        <ul class="ul1" id="ul1">
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
        </ul>
  <ul class="ul2" id="ul2">
            <li><a href="#"><img src="轮播/pic3.jpg" height="240" width="670"></a><span>-1</span></li>
            <li style="display: block;"><a href="#"><img src="轮播/pic1.jpg" height="240" width="670"></a><span>0</span></li>
            <li><a href="#"><img src="轮播/pic2.jpg" height="240" width="670"></a><span>1</span></li>
            <li><a href="#"><img src="轮播/pic4.jpg" height="240" width="670"></a><span>2</span></li>
            <li><a href="#"><img src="轮播/pic5.jpg" height="240" width="670"></a><span>2</span></li>
            <li><a href="#"><img src="轮播/pic6.jpg" height="240" width="670"></a><span>2</span></li>
            <li><a href="#"><img src="轮播/pic3.jpg" height="240" width="670"></a><span>2</span></li>
            <li style="display: block;"><a href="#"><img src="轮播/pic1.jpg" height="240" width="670"></a><span>3</span></li>
   </ul>
    <div class="pre-next">
        <a href="javascript:;" id="pre">&lt;</a>
        <a href="javascript:;" id="next">&gt;</a>
    </div>
</div>  

2.css部分

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #box {
        width: 670px;
        height: 240px;
        margin: 0 auto;
        background: pink;
        position: relative;
        overflow: hidden;
    }
    .ul1 {
        overflow: hidden;
        position: absolute;
        right: 10px;
        bottom: 0;
        z-index: 1000;
    }
    .ul1 li {
        float: left;
        margin: 5px;
        width: 22px;
        height: 22px;
        background: #ccc;
        text-align: center;
        line-height: 22px;
        border-radius: 50%;
    }
    .ul1 li.active {
        background: orange;
    }
    .ul1 li a {
        color: #fff;
        text-decoration: none;
    }
    .ul2 {
        overflow: hidden;
        left: -670px;
        position: absolute;
        height: 240px;
    }
    .ul2 li {
        /*display: none;*/
        float: left;
        position: relative;
    }
    .ul2 li span {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #ccc;
        left: 50%;
        top: 50%;
        text-align: center;
        line-height: 50px;
        margin: -25px 0 0 -25px;
    }
    img {
        vertical-align: top;
    }
    .pre-next {
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -30px;
        height: 60px;
        width: 100%;
    }
    .pre-next a {
        width: 40px;
        height: 60px;
        background: rgba(0,0,0,0.3);
        color: #fff;
        text-decoration: none;
        font-size: 20px;
        line-height: 60px;
        position: absolute;
        text-align: center;
    }
    #pre {
        left: 0;
    }
    #next {
        right: 0;
    }
    </style>

3.js部分

<script type="text/javascript" src="jq1.7.2/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        // 下标
        var iNow = 0;
        var aLi2 = $('.ul2 li');
        // 一个li的宽
        var liW = aLi2.width();
        // 先设置ul的宽
        $('.ul2').width(aLi2.length * liW);

        // 下一页
        $('#next').on('click',nextPage);

        // 上一页
        $('#pre').on('click',prePage);

        //上一页的函数
    function prePage () {
        iNow--;
        if (iNow == -1) {
        $('.ul2').stop().animate({left: -(iNow + 1) * liW},100,function () {
        $('.ul2').css('left',-(aLi2.length - 2) * liW);
            });
        iNow = aLi2.length - 3;

        }else {
        $('.ul2').stop().animate({left: -(iNow + 1) * liW},100);
        }

        // 改变选项
        $('.ul1 li').removeClass('active');
        $('.ul1 li').eq(iNow).addClass('active');

        }

        // 下一页的函数
    function nextPage() {
        iNow++; // 1
        if (iNow == aLi2.length - 2) {
        $('.ul2').stop().animate({left: -(iNow + 1) * liW},100,function () {
        $('.ul2').css('left',-liW);
            });
                iNow = 0;
            } else {
            // 给ul设置left
        // $('.ul2').css('left',-(iNow + 1) * liW);
        $('.ul2').stop().animate({left: -(iNow + 1) * liW},100);
            }

            // 改变选项
            $('.ul1 li').removeClass('active');
            $('.ul1 li').eq(iNow).addClass('active');

        }

        // 选项卡
        $('.ul1 li').click(function () {
            // 先清空所有
            // 改变选项
            $('.ul1 li').removeClass('active');
            iNow = $(this).index();
            $('.ul1 li').eq(iNow).addClass('active');
            $('.ul2').stop().animate({left: -(iNow + 1) * liW},100);
        });
    })
    </script>