189 8069 5689

移植性很高的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://cdxtjz.cn/article/jdhdcj.html

    联系我们

    您好HELLO!
    感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
    • 电话:028- 86922220 18980695689
    • 商务合作邮箱:631063699@qq.com
    • 合作QQ: 532337155
    • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

    小谭建站工作室

    成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

    小谭观点

    相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
    我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。