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!
