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

jquery全屏图片幻灯片展示特效 这是一个超大的幻灯片自动扩展以填补容器来显示你的图片，可以覆盖整个屏幕，或某一区域。每张图片都可以设置平移，放大或放小等效果，还可以自定义标题和让其中内容永久展示。还可以设置幻灯片连续运行几次后停止，每一个图像的变化后，执行自定义代码等。是一个支持各种平台的响应式布局的jquery图片插件。 使用说明： 1.加入css与js文件 link rel=stylesheet type=text/css href=smooth_slider.css script src=/ajax/libs/jquery/1.10.2/jquery.min.js/script script src=jquery-slider.js 2.在body内加入内容 div id=throbberimg src=img/throbber.gif/div div id=resume style=display:noneReplay/div div id=pan_area style=height:100%/div div id=img_msg_areaspan/span/div div id=static_text_areaThere 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./div throbber为载入图片时的loading resume重新播放按钮 pan_area显示幻灯片的位置 img_msg_area显示图片说明，也是js中playlist中的caption显示的位置。 3.jquery代码使用 script $(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 //