jquery全屏图片幻灯片展示特效.doc

jquery全屏图片幻灯片展示特效这是一个超大的幻灯片自动扩展以填补容器来显示你的图片，可以覆盖整个屏幕，或某一区域。每张图片都可以设置平移，放大或放小等效果，还可以自定义标题和让其中内容永久展示。还可以设置幻灯片连续运行几次后停止，每一个图像的变化后，执行自定义代码等。是一个支持各种平台的响应式布局的jquery图片插件。使用说明：1.加入css与js文件 2.在body内加入内容ReplayThere is nothing more amazing than nature, the miracle that is every creature in her domain. The birds, the lions, down to every insect, together they form the circle of life that supports each other.throbber为载入图片时的loadingresume重新播放按钮pan_area显示幻灯片的位置img_msg_area显示图片说明，也是js中playlist中的caption显示的位置。3.jquery代码使用 $(function() $(#resume).on(click, function() / set up resume button behavior $(#pan_area).smoothslider(resume) / resume playing of this slideshow. Pass in pause to pause it instead $(this).hide() / hide resume button ) $(#pan_area).smoothslider(install, / either playlist or playlist_url must be specified. / playlist is a list of dictionaries. Each dictionary specifies the necessary information / to display one image and it can have the following fields: / url - url of the image / caption - a text to pass to the on_image_change when the given image is going / to be displayed / slide - specifies how the sliding should occur. Its a dictionary with the / following values: / x1 - initial x position. The range is 0 . image width / x2 - final x position. The range is 0 . image width / y1 - initial y position. The range is 0 . image height / y2 - final y position. The range is 0 . image height / z1 - initial zoom. It should be = 1 / z2 - final zoom. It should be = 1 / hint - can be one of: / zoom - zoom / hpan - pan horizontally / vpan - pan vertically / / When the browser has limited support, the plugin will only perform / one motion (horizontal/vertical panning or zooming). / If hint is used, then the specified motion is used instead. / If slide is not specified, then a random motion is used / If slide has an empty dictionary, then no motion is performed / playlist_url is a url of a json file which specifies among other things / a playlist. Besides that, it can also contain some parameters, / which if specified, will override the ones specified when calling smoothslider. / Besides the playlist, the parameters that can be specified in the json file are: / / preload_images, anim_fps, transition_time, hold_time, loops playlist: url:img/img0.jpg, caption:渐渐放大, slide:z1:1, z2:1.5, / zoom in (magnification from 1 to 1.5) url:img/img1.jpg, caption:渐渐缩小, slide:z1:2, z2:1, / zoom out url:img/img2.jpg, caption:渐渐向上, slide:y1:0, y2:200, / pan up url:img/img3.jpg, caption: 渐渐向左变化, slide:x1:0, x2:20, z1:1, / pan left url:img/img4.jpg, caption:没有动画的展示,slide: / no slide , loops:2, / play everything twice and then pause. If not specified, the slider will / play indefinitely hold_time:2, transition_time:1, / this function gets called whenever theres an image change on_image_change:function(caption, image_url) var area= $(#img_msg_area).find(span); area.animate(opacity: 0, 500, swing, function() area.text(caption); area.animate(opacity: 1, 500); / fade in & out take 500ms each ); , throbber:$(#throbber), / an image to show when waiting for images to load on_pause:function() $(#resume).show() ); ); 主要内容都在