简明现代魔法 -> JQuery -> JQuery分屏指示器图片轮换效果

JQuery分屏指示器图片轮换效果

2011-07-05

在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>

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

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们