移植性很高的jquery圖片輪播插件

移植性很高的jquery圖片輪播插件

1，輪播插件：

    本插件可以支持圖片和文字，帶縮略圖，圖片大小可以調(diào)整，圖片數(shù)量不限，兼容IE，F(xiàn)F，Chrome等瀏覽器。

2，效果展示：

3，代碼塊

html頁面需要引入js文件，

<link type="text/css" rel="stylesheet" href="css/galleryview.css" />
<script type="text/javascript" src="js/jquery/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery/jquery.galleryview-1.1.js"></script>
<script type="text/javascript" src="js/jquery/jquery.timers-1.1.2.js"></script>

在頁面需要調(diào)用js，并設(shè)置參數(shù)：

  $('#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// 縮略圖高度
 });

可以設(shè)置的參數(shù)，參考：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內(nèi)的內(nèi)容，如下：

<div id="photos" class="galleryview">
  <div class="panel">
     <img src="img/01.jpg" /> 
    <div class="panel-overlay">
      <h3>Effet du soleil sur le paysage</h3>
      <p>xxxxxxxxxxxxxxxxxxxxx</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/02.jpg" /> 
    <div class="panel-overlay">
      <h3>Eden</h3>
      <p>xxxxxxxxxxxxxxxxxxxxx.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/03.jpg" /> 
    <div class="panel-overlay">
      <h3>Snail on the Corn</h3>
      <p>xxxxxxxxxxxxxxxxxxxxxx</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/04.jpg" /> 
    <div class="panel-overlay">
      <h3>Flowers</h3>
      <p>xxxxxxxxxxxxxx</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/06.jpg" /> 
    <div class="panel-overlay">
      <h3>Alone Beach</h3>
      <p>xxxxxxxxxxxx</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/05.jpg" /> 
    <div class="panel-overlay">
      <h3>Sunrise Trees</h3>
      <p>Photo by <a >here</a>.</p>
    </div>
  </div>
  <div class="panel">
     <img src="img/07.jpg" /> 
    <div class="panel-overlay">
      <h3>Waterfall</h3>
      <p>xxxxxxxxx </p>
    </div>
  </div>
  <div class="panel">
     <img src="img/08.jpg" /> 
    <div class="panel-overlay">
      <h3>Death Valley</h3>
      <p>XXX</p>
    </div>
  </div>
  <ul class="filmstrip">
    <li><img src="img/frame-01.jpg" /></li>
    <li><img src="img/frame-02.jpg" /></li>
    <li><img src="img/frame-03.jpg" /></li>
    <li><img src="img/frame-04.jpg" /></li>
    <li><img src="img/frame-06.jpg" /></li>
    <li><img src="img/frame-05.jpg" /></li>
    <li><img src="img/frame-07.jpg" /></li>
    <li><img src="img/frame-08.jpg" /></li>
  </ul>
</div>

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

以下是動態(tài)添加圖片的方法：

jsp，動態(tài)添加圖片可以這樣：

<!-- 圖片輪播 -->
     <div id="photos" class="galleryview">
      <div id="p_w_picpathPanel">
       <!-- 需要展示的圖片 -->
       </div>
        <ul class="filmstrip">
       <!-- 需要展示圖片的縮略圖 -->
      </ul>
    </div>
<!-- 輪播結(jié)束 -->

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.length;i++){
               div_inner+='<div class="panel">\
          <img src="${ctx }/'+p_w_picpaths[i].path+'/'+p_w_picpaths[i].fileName+'" width="674"/> \
          <div class="panel-overlay">\
            <p>'+(p_w_picpaths[i].info!=null?p_w_picpaths[i].info:p_w_picpaths[i].oldName)+'</p>\
          </div>\
       </div>\
               ';
               li_inner += '<li><img src="${ctx }/'+p_w_picpaths[i].path+'/b_'+p_w_picpaths[i].fileName+'" width="100" height="37" /></li>';
              }
             }
             
             $("#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// 縮略圖高度
 });
}