Skip to content

Instantly share code, notes, and snippets.

@jsok

jsok/slider.html

Created May 25, 2011 01:09
Show Gist options
  • Save jsok/990120 to your computer and use it in GitHub Desktop.
Save jsok/990120 to your computer and use it in GitHub Desktop.
Download ZIP
Simple jquery slider
Raw
slider.html
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>iTunes slider</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div id="gallery">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
</div>
<a href="#" id="next"></a>
</div>
</body>
</html>
Raw
slider.js
$(document).ready(function()
{
var index = 0;
var images = $("#gallery img");
var imgHeight = $(images).attr("height");
for (i=0; i<images.length; i++)
{
$(images[i]).addClass("image-"+i);
}
$("#next").click(sift);
show(index);
setInterval(sift, 8000);
function sift()
{
if (index<(images.length-1)){index+=1 ; }
else {index=0}
show (index);
}
function show(num)
{
$(images).fadeOut(400);
$(".image-"+num).stop().fadeIn(400);
}
});
Raw
style.css
*{
margin: 0;
padding: 0;
border: 0 none;
outline: 0;
}
img{
display: block;
max-width: 600px;
max-height: 550px;
overflow: hidden;
}
#gallery{
overflow: hidden;
}
#gallery img{
position: absolute;
}
#next{
display: block;
width: 47px;
height: 43px;
background: url(img/arrow.png);
position: absolute;
top: 550px;
left: 600px;
}
#next:hover{
background: url(img/arrowmo.png);
}
.clear{
clear: both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment