在HTML中使用table標籤時

Question

蔭tyring利用這個滑塊如何出現滑塊：http://www.menucool.com/javascript-image-slider

但當蔭試圖用這樣的代碼，IAM無法得到輸出..

<table> 
<tr> 
<td> 

<div id="sliderFrame">  
     <div id="slider"> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="JSImageSlider/images/image-slider-1.jpg" alt="Welcome to Google" /> 
      </a> 
      <img src="JSImageSlider/images/image-slider-2.jpg" alt="" width="1200px"/> 
      <img src="JSImageSlider/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /> 
      <img src="JSImageSlider/images/image-slider-4.jpg" alt="#htmlcaption" /> 
      <img src="JSImageSlider/images/image-slider-5.jpg"/> 
     </div> 

    </div> 
</td> 

<td> 
<div id="sliderFrame">  
     <div id="slider"> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="JSImageSlider/images/image-slider-1.jpg" alt="Welcome to Google" /> 
      </a> 
      <img src="JSImageSlider/images/image-slider-2.jpg" alt="" width="1200px"/> 
      <img src="JSImageSlider/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /> 
      <img src="JSImageSlider/images/image-slider-4.jpg" alt="#htmlcaption" /> 
      <img src="JSImageSlider/images/image-slider-5.jpg"/> 
     </div> 

    </div> 
</td> 
</tr> 
</table> 

Answer 1

第一：加倍您的滑塊ID。 ID =元素的身份！將sliderFrame標記爲類。就像這樣：

<table> 
<tr> 
<td> 

<div class="sliderFrame">  
     <div id="slider"> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="images/image-slider-1.jpg" alt="Welcome to Google" /> 
      </a> 
      <img src="images/image-slider-2.jpg" alt="" width="1200px"/> 
      <img src="images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /> 
      <img src="images/image-slider-4.jpg" alt="#htmlcaption" /> 
      <img src="images/image-slider-5.jpg"/> 
     </div> 

    </div> 
</td> 

<td> 
<div class="sliderFrame">  
     <div id="slider2"> 
      <a href="http://www.google.com" target="_blank"> 
       <img src="images/image-slider-1.jpg" alt="Welcome to Google" /> 
      </a> 
      <img src="images/image-slider-2.jpg" alt="" width="1200px"/> 
      <img src="images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /> 
      <img src="images/image-slider-4.jpg" alt="#htmlcaption" /> 
      <img src="images/image-slider-5.jpg"/> 
     </div> 

    </div> 
</td> 
</tr> 
</table> 

二：改變你的CSS文件：

.sliderFrame {position:relative;width:700px;margin: 0 auto;} 

#slider, #slider2 { 
    width:700px;height:306px; 
    background:#fff url(loading.gif) no-repeat 50% 50%; 
    position:relative; 
    margin:0 auto; 
    box-shadow: 0px 1px 5px #999999; 
} 
#slider img, #slider2 img { 
    position:absolute; 
    border:none; 
    display:none; 
} 

，最後一個：你的js代碼必須實現你的滑塊的另一個實例：

var sliderOptions= 
{ 
    sliderId: "slider", 
    effect: "series1", 
    effectRandom: false, 
    pauseTime: 2600, 
    transitionTime: 500, 
    slices: 12, 
    boxes: 8, 
    hoverPause: true, 
    autoAdvance: true, 
    captionOpacity: 0.3, 
    captionEffect: "fade", 
    thumbnailsWrapperId: "thumbs", 
    license: "free" 
}; 

var sliderOptions2 = 
{ 
    sliderId: "slider2", 
    effect: "series1", 
    effectRandom: false, 
    pauseTime: 2600, 
    transitionTime: 500, 
    slices: 12, 
    boxes: 8, 
    hoverPause: true, 
    autoAdvance: true, 
    captionOpacity: 0.3, 
    captionEffect: "fade", 
    thumbnailsWrapperId: "thumbs2", 
    license: "free" 
}; 

var imageSlider=new mcImgSlider(sliderOptions); 
var imageSlider2=new mcImgSlider(sliderOptions2); 

這就是所有。表標記是innosent =）