13518219792
网站建设资讯

NEWS

网站建设资讯

移植性很高的jquery图片轮播插件

移植性很高的jquery图片轮播插件

创新互联于2013年成立，先为新区等服务建站，新区等地企业，进行企业商务咨询服务。为新区企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

 

1，轮播插件：

    本插件可以支持图片和文字，带缩略图，图片大小可以调整，图片数量不限，兼容IE，FF，Chrome等浏览器。

2，效果展示：

    移植性很高的jquery图片轮播插件

 

移植性很高的jquery图片轮播插件

 

 

3，代码块

html页面需要引入js文件，

在页面需要调用js，并设置参数：

  $('#photos').galleryView({
  overlay_height: 35,// 阴影部分高度
  overlay_font_size: '13px',// 阴影部分字体大小
  pause_on_hover: true,// 光标进入之后,停止播放
  easing:'easeInBack',// frame动画效果
  panel_width: 674,// 图片宽度
  panel_height: 252,// 图片高度
  frame_width: 100,// 缩略图宽度
  frame_height: 37// 缩略图高度
 });

可以设置的参数，参考：jquery.galleryview-1.1.js文件末尾：

 $.fn.galleryView.defaults = {
  panel_width: 400,
  panel_height: 300,
  frame_width: 80,
  frame_height: 80,
  filmstrip_size: 3,
  overlay_height: 70,
  overlay_font_size: '1em',
  transition_speed: 400,
  transition_interval: 6000,
  overlay_opacity: 0.6,
  overlay_color: 'black',
  background_color: 'black',
  overlay_text_color: 'white',
  caption_text_color: 'white',
  border: '1px solid black',
  nav_theme: 'light',
  easing: 'swing',
  filmstrip_position: 'bottom',
  overlay_position: 'bottom',
  show_captions: false,
  fade_panels: true,
  pause_on_hover: false
 };

但是一般不会用到这么多。

body内的内容，如下：


  
      
    
      
Effet du soleil sur le paysage

      
xxxxxxxxxxxxxxxxxxxxx

    
  
                     

Eden

      

xxxxxxxxxxxxxxxxxxxxx.

    
  
                     

Snail on the Corn

      

xxxxxxxxxxxxxxxxxxxxxx

                             

Flowers

      

xxxxxxxxxxxxxx

                             

Alone Beach

      

xxxxxxxxxxxx

                             

Sunrise Trees

      

Photo by a_glitch.  View full-size photo here.

                             

Waterfall

      

xxxxxxxxx 

                             

Death Valley

      

XXX

               
    •     
    •     
    •     
    •     
    •     
    •     
    •     
    •   

     

    ========================

    以下是动态添加图片的方法：

    jsp，动态添加图片可以这样：

    
     
      
       
       
        
       
      
    

    js文件需要使用jquery完成：

    $(function(){
    doPortalImageListQuery();
}); 

function doPortalImageListQuery(){
 //UUR.getImagesByStatus 是后台路径
 $.ajax(UUR.getImagesByStatus,{},function(bln,response,o){
             var objRet = toJson(response.responseText);
             var p_w_picpaths = objRet.data;// 获得照片列表
             
             var div_inner = '';
             var li_inner = '';
             if(p_w_picpaths.length!=0){
              for(var i=0;i \
          \
            
    '+(p_w_picpaths[i].info!=null?p_w_picpaths[i].info:p_w_picpaths[i].oldName)+'
    \
          \
       \
               ';
               li_inner += '
    • ';
              }
             }
             
             $("#p_w_picpathPanel").append(div_inner);
             $(".filmstrip").append(li_inner);
    play();
         });
}

// 图片轮播代码
function play(){
 $('#photos').galleryView({
  overlay_height: 35,// 阴影部分高度
  overlay_font_size: '13px',// 阴影部分字体大小
  pause_on_hover: true,// 光标进入之后,停止播放
  easing:'easeInBack',// frame动画效果
  panel_width: 674,// 图片宽度
  panel_height: 252,// 图片高度
  frame_width: 100,// 缩略图宽度
  frame_height: 37// 缩略图高度
 });
}

    附件：http://down.51cto.com/data/2364786

    文章名称：移植性很高的jquery图片轮播插件
    链接URL：http://cdweb.net/article/jdhdcj.html

    其他资讯