jQuery image loop not displaying any images
Posted
by
user1871097
on Stack Overflow
See other posts from Stack Overflow
or by user1871097
Published on 2012-12-02T22:57:50Z
Indexed on
2012/12/02
23:03 UTC
Read the original article
Hit count: 116
I'm trying to create a very basic image gallery in jQuery. The goal is to have 3 images fade in and out in a sequential order. So image 1 is displayed, fades to image 2 etc. then the whole thing loops again.
My HTML code so far is as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider</title>
<style type="text/css">
.slider{
width: 2848px;
height: 2136px;
overflow: hidden;
margin: 30px auto;
}
.slider img{
width:2848px;
height:2136px;
display:none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="Slider2.js"></script>
</head>
<body onload="Slider2"();>
<div class="slider">
<img id="1" src="31.jpg" border="0" alt="city"/>
<img id="2" src="2vrtigo2.jpg" border="0" alt="roof"/>
<img id="3" src="3.jpg" border="0" alt="sea"/>
</div>
</body>
And the jQuery code looks like this:
function Slider2()
{
var total = $(".slider img").size();
for (i=1; i<=total; i+=1)
{
$(".slider #"+i).fadeIn(600);
$(".slider #"+i).delay(2000).hide;
}}
A quick syntactical note, I've also tried using i++ in the last argument of the For Loop. The result of this code is a blank, white page. I know some of the HTML is being compiled because the enormous 2848x2136 div creates scroll bars on the browser.
If anyone could help me out, that would be greatly appreciated. Obviously I'm relatively new to web programming and would love some insight into why this isn't working. Thanks!
© Stack Overflow or respective owner
