简单的Jquery滑块不会用.show加载图片

时间:2012-08-02 14:25:37

标签: jquery user-interface slider

我按照教程去了一个发球台,但我不能让它工作,它加载加载gif并隐藏其他图像,但这个.show函数什么都不做,我错过了什么?

<style type="text/css">
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(img/load.gif);
background-repeat:no-repeat;
background-position:center;
}
.shadow{
background-image:url(img/shadow.png);
background-repeat:no-repeat;
background-position:top;
width:864px;
height:144px;
margin:-60px auto;
}
.slider img{
width:800px;
height:350px;
display:none;
}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery-ui/1.8.22/jquery-ui.min.js"></script>
<script type="text/javascript">

function Slider(){
    $(".slider #1").show("fade",500);
}

</script>
</head>

 <body onload="Slider();">
<div class="slider">
    <img id="1" src="img/image1.jpg" border="0" alt="Image 1"/>
    <img id="2" src="img/image2.jpg" border="0" alt="Image 2"/>
    <img id="3" src="img/image3.jpg" border="0" alt="Image 3"/>
</div>
<div class="shadow">
</div>
</body>

1 个答案:

答案 0 :(得分:0)

$(".slider #1").show("fade",500);替换为 $(".slider #1").fadeIn(500);

http://jsfiddle.net/Ty7ce/