使用 jQuery Slider 使用淡入淡出来浏览图像

Question

我正在尝试复制这个滑块：http://jsfiddle.net/aXfHL/1/和我遵循了给出的示例，但是在我的工作版本中，滑块没有显示，我不确定我错过了什么。

这是 html：

<div id="mySlider"></div>
<div id="gallery">
    <img class="abs pic1" src="images/11-post-Tang-fragmentation.jpg" alt="11-post-Tang-fragmentation" width="1024" height="768">
    <img class="abs pic2" src="images/7-Former-Qin-Eastern-Jin.jpg" alt="7-Former-Qin-Eastern-Jin" width="1024" height="768">
    <img class="abs pic3" src="images/15-Qing.jpg" alt="15-Qing" width="1024" height="768">
    <img class="abs pic4" src="images/13-Yuan.jpg" alt="13-Yuan" width="1024" height="768">
    <img class="abs pic5" src="images/5-Han.jpg" alt="5-Han" width="1024" height="768">
    <img class="abs pic6" src="images/4-Qin.jpg" alt="4-Qin" width="1024" height="768">
    <img class="abs pic7" src="images/6-Three-Kingdoms.jpg" alt="6-Three-Kingdoms" width="1024" height="768">
    <img class="abs pic8" src="images/12-Jin-Song-Xi-Xia.jpg" alt="12-Jin-Song-Xi-Xia" width="1024" height="768">
    <img class="abs pic9" src="images/2-Zhou.jpg" alt="2-Zhou" width="1024" height="768">
    <img class="abs pic10" src="images/8-Wei-Northern-Qi-Chen-Liang.jpg" alt="8-Wei-Northern-Qi-Chen-Liang" width="1024" height="768">
    <img class="abs pic11" src="images/9-Sui.jpg" alt="9-Sui" width="1024" height="768">
    <img class="abs pic12" src="images/10-Tang.jpg" alt="10-Tang" width="1024" height="768">
    <img class="abs pic13" src="images/14-Ming.jpg" alt="14-Ming" width="1024" height="768">
    <img class="abs pic14" src="images/1-Shang.jpg" alt="1-Shang" width="1024" height="768">
    <img class="abs pic15" src="images/3-Warring-States.jpg" alt="3-Warring-States" width="1024" height="768">
</div>

这是 jQuery

$( "#mySlider" ).slider({
range: "max",
min: 1,
max: 15,
value: 1,
slide: function( event, ui ) {
    var pic_num = ui.value;
    var new_image_elm = $("#gallery img.pic"+pic_num);
    var old_image_elm = $("#gallery img:visible");
    if(new_image_elm != null){
        var zIndex = parseInt(old_image_elm.css('z-index'));
        new_image_elm.css('z-index', zIndex+1);          
        new_image_elm.fadeIn( "slow", function() {
            // Animation complete
            old_image_elm.hide();
        });         
    }
}
});

我没有收到任何错误，我只是没有得到滑块。我将不胜感激在解决这个问题方面得到一些帮助。

谢谢。

Answer 1

将脚本换入

$(window).load(function(){
    /*slider code*/
}

原因：脚本应在页面加载后执行

---

要使滑块显示，请background-color它。通过检查并进行以下更改，可以看到：

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    background-color: white;
}