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!
