我是Javascript的新手,我正在尝试用图片制作一个简单的'幻灯片'。这是我的代码,说它不起作用,它正常加载html代码,忽略'隐藏'功能:怎么办?
<script type="text/javascript">
$(function() {
var tot = $(".slide").length,
current = 1
$(".slide").not(":first").hide()
$("#next").click(function () {
if (current+1 > tot) return false
$(".slide:visible").hide().next().show()
current++
})
$("#prev").click(function () {
if (current-1 < 1) return false
$(".slide:visible").hide().prev().show()
current--
})
})
</script>
<div id="slide_container">
<div class="slide">
<p>Step 1 explained</p>
<img src="images/android.png" border="none"/>
</div>
<div class="slide">
<p>Step 2 Explained</p>
<img src="images/apple.png" border="none"/>
</div>
<div class="slide">
<p>Step 3 explained</p>
<img src="images/windows.png" border="none"/>
</div>
<div>
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
</div>
谢谢!
答案 0 :(得分:1)
为了清晰起见,我重新格式化了代码并添加了一些分号;
,我还更改了当前和总数的索引,所有似乎都正常工作我已经创建了{{ 3}}使用下面的JavaScript,似乎一切正常。放手一搏
$(function()
{
var total = $(".slide").length;
var current = 0
$(".slide").not(":first").hide()
$("#next").click(function ()
{
if (current + 1 >= total)
{
return false;
}
$(".slide:visible").hide().next().show();
current++
})
$("#prev").click(function ()
{
if (current <= 0)
{
return false;
}
$(".slide:visible").hide().prev().show();
current--;
});
})
答案 1 :(得分:1)
我希望您在此处提供的脚本块之前添加了Jquery引用。只是一个想法。