使用 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。通过检查并进行以下更改，它是可见的：

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