I'm new to Javascript, and I'm trying to make a simple 'slideshow' with images. Here is my code, put it does not work, it load the html code as normal, ignoring the 'hide' functionality: What to do?
<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>
Thanks!
I've reformatted your code and added a few semi-colons ;
for clarity and I've also changed the indexing of the current and total, and all seems to work okay I've created a jsFiddle using the below JavaScript, and all seems to work fine. Give this a go
$(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--;
});
})
I hope you have the Jquery reference added before the script block you provided here. Just a thought.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.