本文实例讲述了jquery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：
运行效果图如下：
主要代码如下：
$(function() {//加载时的图片var $loader= $('#st_loading');//获取的ul元素var $list= $('#st_nav');//当前显示的图片var $currimage = $('#st_main').children('img:first');//加载当前的图片//同时显示导航的项$('').load(function(){$loader.hide();$currimage.fadein(3000);//滑出导航settimeout(function(){$list.animate({'left':'0px'},500);},1000);}).attr('src',$currimage.attr('src'));//计算出将被显示的略缩图所在的div元素的宽度buildthumbs();function buildthumbs(){$list.children('li.album').each(function(){var $elem = $(this);var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');var $thumbs = $thumbs_wrapper.children(':first');//每张略缩图占有180像素的宽度和3像素的间距(margin)var finalw = $thumbs.find('img').length * 183;$thumbs.css('width',finalw + 'px');//是这元素具有滚动性makescrollable($thumbs_wrapper,$thumbs);});}//点击菜单项目的时候（向上向下箭头切换）//使略缩图的div层显示和隐藏当前的//打开菜单（如果有的话）$list.find('.st_arrow_down').live('click',function(){var $this = $(this);hidethumbs();$this.addclass('st_arrow_up').removeclass('st_arrow_down');var $elem = $this.closest('li');$elem.addclass('current').animate({'height':'170px'},200);var $thumbs_wrapper = $this.parent().next();$thumbs_wrapper.show(200);});$list.find('.st_arrow_up').live('click',function(){var $this = $(this);$this.addclass('st_arrow_down').removeclass('st_arrow_up');hidethumbs();});//点击略缩图，改变大的图片$list.find('.st_thumbs img').bind('click',function(){var $this = $(this);$loader.show();$('').load(function(){var $this = $(this);var $currimage = $('#st_main').children('img:first');$this.insertbefore($currimage);$loader.hide();$currimage.fadeout(2000,function(){$(this).remove();});}).attr('src',$this.attr('alt'));}).bind('mouseenter',function(){$(this).stop().animate({'opacity':'1'});}).bind('mouseleave',function(){$(this).stop().animate({'opacity':'0.7'});});//隐藏当前已经打开了的菜单的函数function hidethumbs(){$list.find('li.current') .animate({'height':'50px'},400,function(){$(this).removeclass('current'); }) .find('.st_thumbs_wrapper') .hide(200) .andself() .find('.st_link span') .addclass('st_arrow_down') .removeclass('st_arrow_up');}//是当前的略缩图div层滚动//当鼠标移至菜单层的时候会自动地进行滚动function makescrollable($outer, $inner){var extra = 800;//获取菜单的宽度var divwidth = $outer.width();//移除滚动条$outer.css({overflow: 'hidden'});//查找容器上的最后一张图片var lastelem = $inner.find('img:last');$outer.scrollleft(0);//当用户鼠标离开菜单的时候$outer.unbind('mousemove').bind('mousemove',function(e){var containerwidth = lastelem[0].offsetleft + lastelem.outerwidth() + 2*extra;var left = (e.pagex - $outer.offset().left) * (containerwidth-divwidth) / divwidth - extra;$outer.scrollleft(left);});}});
希望本文所述对大家的jquery程序设计有所帮助。