Web Widget - A Basic Image Slider Gallery

關於圖片的slider滑動，蠻多網頁會有應用到，且網路上有很多人撰寫了炫麗的image slider，

還寫成plugin來供大家下載使用。這個功能可以讓我們在很多小圖片中選取要顯示的圖片

，而這些圖片的選取方式，可以利用點選向右的button or 向左的button來顯示出目前可選取

的小圖片。因此在出於好奇心的情況下，自己也製作了一個簡單的image slider，以備不時

之需，說不會有派上用場的時候，又或者先想想這個概念大概可以怎麼實作！

首先，我們要配置圖片顯示的部分及要捲動的顯示區域，如下圖：

以上圖片來源為Window 7 (我的圖片)，以此程式作為示範之用

HTML程式碼如下：

<div style="margin:15px 0px 0px 35px; width:512px; height:384px">
    <img src="images/ajax-loader.gif" id="load_img_wait">
    <img id="img_display"> 
</div>
<div style="margin-top:10px;margin-left:30px;width:612px; position: relative;">
    <div class="back_btn"></div>
    <div style="padding:5px; width:507px; height:75px; overflow:hidden">
       <ul class="img_list">
          <li><img src="images/thumbnail_Hydrangeas.jpg"></li>
          <li><img src="images/thumbnail_Jellyfish.jpg"></li>
          <li><img src="images/thumbnail_Koala.jpg"></li>
          <li><img src="images/thumbnail_Tulips.jpg"></li>
          <li><img src="images/thumbnail_Desert.jpg"></li>
          <li><img src="images/thumbnail_Chrysanthemum.jpg"></li>
          <li><img src="images/thumbnail_Penguins.jpg"></li>
          <li><img src="images/thumbnail_Lighthouse.jpg"></li>
      </ul>
    </div>
    <div class="forward_btn"></div>
</div>

img_display的區塊為顯示大圖的區域，下一個區塊為顯示捲動小圖的區域。小圖與大圖為

分開的，請注意！<ul>上一層包附的div，設定為當ul的width大於它時，其餘的圖片會隱藏

起來(overflow:hidden)。

CSS語法如下：

*{
   margin:0;
   padding:0;
}
li{
   display: list-item;
   float: left;
   margin-right:5px;
}
.back_btn{
   cursor: pointer;
   width: 13px;
   left:-20px;
   height: 100px;
   position: absolute;
   top: 10px;
   z-index: 10;
   background: url(images/scroll_back.png) 0px 22px no-repeat;;
}
.forward_btn{
   cursor: pointer;
   right: 80px;
   width: 13px;
   height: 100px;
   position: absolute;
   top: 10px;
   z-index: 10;
   background: url(images/scroll_forward.png) 0px 22px no-repeat;;
}
.img_list{
   position: relative;
   right:0px;
   float: left;
   list-style: none;
}
.img_list li img{
   border: 1px solid #A52A2A;
   cursor:pointer;
   opacity: 0.5;
}
.img_list li img:hover{
   opacity: 1;
}
#load_img_wait{
   position:absolute; 
   top:200px; left:280px; 
   display:none;
}

請注意，img_list right:0px的部分，當點選向右捲動時，透過right的設定，讓整個ul相對的

向左移動，以此隱藏的圖示可以顯示出來！

JavaScript 語法如下：
第一部分為，html載入後的處理與圖示載入後的處理

var li_width = 0;
var li_width_display = 512;
var img_display_obj = new Image();
$(document).ready(function(){
   img_display_obj.src = "images/Hydrangeas.jpg";
   window.onload = function(){
      li_len = $(".img_list").find("li").length;
      li_width = (li_len*(105+2));
      $(".img_list").css("width", (li_width)+"px");
   }
   img_display_obj.onload = loadimage;
};
});

html載入完成時，設定<ul>的width；而預設圖片的第一張圖，並且將它的屬性assign給

<img id="img_display">。

關於點選的button語法如下：

var animate_auto;
$(".forward_btn").click(function(){
    li_right = parseInt($(".img_list").css("right"));
    if((li_width - li_width_display) <= li_right){
       return false;
    }
    li_right_m = 0;
    animate_timer = setInterval(function(){
       li_right_m = li_right_m + 30;
       li_right = li_right + 30;
       if(li_right >= (li_width - li_width_display)){
           li_right = (li_width - li_width_display);
       }
       $(".img_list").css("right", li_right+"px");
       if(li_right != 0 && (li_right_m % 105 == 0 || li_right == (li_width - li_width_display))){
          clearInterval(animate_timer);
       } 
    }, 20);
}).mouseenter(function(){
    li_right = parseInt($(".img_list").css("right"));
    if(li_right == (li_width - li_width_display)){
        return false;
    }
    animate_auto = setInterval(function(){
       li_right = li_right + 5;
       if(li_right >= (li_width - li_width_display)){
          li_right = (li_width - li_width_display);
       }
       $(".img_list").css("right", li_right+"px");
       if(li_right == (li_width - li_width_display)){
          clearInterval(animate_auto);
       }
    }, 50);
}).mouseleave(function(){
    clearInterval(animate_auto);
});

$(".back_btn").click(function(){
    li_right = parseInt($(".img_list").css("right"));
    if(li_right <= 0){
       return false;
    }
    animate_timer = setInterval(function(){
       li_right_m = li_right_m + 30;
       li_right = li_right - 30;
       if(li_right <= 0){
          li_right = 0;
       }
       $(".img_list").css("right", li_right+"px");
       if(li_right_m % 105 == 0 || li_right == 0){
          clearInterval(animate_timer);
       } 
    }, 20);
}).mouseenter(function(){
    li_right = parseInt($(".img_list").css("right"));
    if(li_right == 0){
       return false;
    }
    animate_auto = setInterval(function(){
       li_right = li_right - 5;
       if(li_right <= 0){
          li_right = 0;
       }
       $(".img_list").css("right", li_right+"px");
       if(li_right == 0){
          clearInterval(animate_auto);
       }
    }, 50);
}).mouseleave(function(){
    clearInterval(animate_auto);
});
 
$(".img_list li img").click(function(){
    $("#img_display").hide();
    $("#load_img_wait").show();
    img_display_obj.src = ($(this).attr("src")).replace("thumbnail_", "");
    img_display_obj.onload = loadimage;
});

function loadimage(){
    $("#load_img_wait").hide();
    $("#img_display").attr({
     "src" : img_display_obj.src,
     "width" : img_display_obj.width/2,
     "hwight" : img_display_obj.height/2
    });
    $("#img_display").show();
}

這個部分主要分成當滑鼠移至button上方時，ul會自動向左移動(right > 0)，至於在時間內

要位移多少可自行設定如何比較順！而點選按鈕的部分，我是設定一次移兩張圖的width，

至於重點的部分為判斷如何停止位移囉！

而back的部分跟forward的部分類似，相對的就是判斷li_right <= 0時，即停止，並且設其為

li_right = 0;，這部分不另外提到了！

PS. 圖片都是找同樣的大小來做示範，所以若圖片都不一樣，可能會有問題

最後，這個陽春版的image slider是可以work，但很單調XD，但重點是概念上希望多少是

有學到一些東西囉！

Zhi-Bin's 談天說地

搜尋此網誌

Web Widget - A Basic Image Slider Gallery

留言

張貼留言