javascript - 在html中使用table标签时如何显示滑块

Question

我很想使用这个滑块：http ://www.menucool.com/javascript-image-slider

但是当我尝试使用这样的代码时，我无法获得输出..

<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);

就这样。表标签是无辜的=）