源码搜藏网

在Web App大行其道的今天，分屏指示器用得非常广泛，从Android、到腾讯的Web OS等等。分屏指示器给人很好的用户体验，下面就实现一个分屏指示器，用于实现图片的简单轮换效果，仅抛砖引玉～

效果演示

JQuery Code

    <script type="text/javascript">
        var curr = 0, next = 0, count = 0;
        $(document).ready(function () {
            // 记录图片的数量	
            count = $('#img_list a').size();
            t = setInterval('imgPlay()', 3000);

            // 鼠标移动到图片或导航上停止播放，移开后恢复播放	
            $('#imgs li, #img_list a').hover(function () {
                clearInterval(t);
            }, function () {
                t = setInterval('imgPlay()', 3000);
            });

            //点击导航播放到相应的图片		
            $('#img_list a').click(function () {
                // index()函数返回当前导航的下标
                var index = $('#img_list a').index(this);
                if (curr != index) {
                    play(index);
                    curr = index;
                };
                return false;
            });
        });

        // 播放图片的函数
        var imgPlay = function () {
            next = curr + 1;
            // 若当前图片播放到最后一张，这设置下一张要播放的图片为第一张图片的下标
            if (curr == count - 1) next = 0;
            play(next);

            curr++;
            // 在当前图片的下标加1后，若值大于最后一张图片的下标，则设置下一轮其实播放的图片下标为第一张图片的下标，而next永远比curr大1
            if (curr > count - 1) { curr = 0; next = curr + 1; }
        };

        // 控制播放效果的函数
        var play = function (next) {
            // 当前的图片滑到左边-500px，完成后返回到右边490px
            // 下一张图片滑到0px处，完成后导航的焦点切换到下一个点上
            $('#imgs li').eq(curr).css({ 'opacity': '0.5' }).animate({ 'left': '-530px', 'opacity': '1' }, 'slow', function () {
                $(this).css({ 'left': '520px' });
            }).end()
			.eq(next).animate({ 'left': '0px', 'opacity': '1' }, 'slow', function () {
			    $('#img_list a').siblings('a').removeClass('active').end().eq(next).addClass('active');
			});
        };
    </script>

具体实现过程请查看本页源代码，什么都清楚了。