使用jQuery Slider使用淡入淡出图像

Question

我试图复制这个滑块：http://jsfiddle.net/aXfHL/1/和我已经按照给出的例子，但在我的working version滑块不显示，我不知道我缺少什么。

下面是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到it.By检查并做出如下改变它是可见的：

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