To anyone. This is mostly for myself, so that I can use it in the future. I will probably edit this as I go along to simplify it at make it more understandable. If you understand it, good! Some of the descriptions are just places that can help me simplify code. I would also like to give my reference to
http://www.scribd.com/doc/19581128/How-to-Create-A-JavaScript-Carousel-From-Scratch-In-Under-10-Minutes where I got some of my code by legacye.
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Carousel</title>
</head>
<body>
<script type="text/javascript" src="http://jqueryjs.
googlecode.com/files/jquery-1.3.2.min.js"> </script>
<div id="container">
<div id="carousel">
<ul>
<li><img src="./images/1.jpg" /></li>
<li><img src="./images/2.jpg" /></li>
<li><img src="./images/3.jpg" /></li>
<li><img src="./images/4.jpg" /></li>
<li><img src="./images/5.jpg" /></li>
<li><img src="./images/6.jpg" /></li>
<li><img src="./images/7.jpg" /></li>
</ul>
</div>
<a id="navPrev" href="#">Previous</a>
<a id="navNext" href="#">Next</a>
</div>
<script type="text/javascript">
$(document).ready(function()
{
// Define animation speed of Carousel
var speed= 600;
var movement = -496;
var movementback = 1;
$('#navPrev').click(function()
{
$('#carousel ul').animate({marginLeft:+movementback+'px'}, speed);
if (movementback<-490)
{
movementback = movementback + 496;
movement = movementback - (496*2);
}
else
{
movementback=movementback;
movement = movementback - 496;
}
});
$('#navNext').click(function()
{
$('#carousel ul').animate({marginLeft:+movement+'px'}, speed);
if (movement> -2976)
{
movement = movement - 496;
movementback = movement + (496*2);
}
else
{
movement = movement;
movementback = movement + 496;
}
});
});
</script>
</body>
<html>
Now comes the css:
#container {height:100px; width:500px; font-family:Tahoma;}
#carousel { height:378px; width:500px; border:1px solid #000;overflow:hidden;}
#carousel ul { list-style-type:none;margin-top:4px; width:3700px;
margin-left:0; padding-left:1px;}
#carousel li { display:inline;}
#carousel ul li img{ width:496px; height:372px; border:1px solid #ccc;float:left; }
#navPrev {float:left;}
#navNext {float:right;}
#navPrev
{
margin-top:-64px;
background:white;
}
#navNext
{
margin-top:-64px;
background:white;
}
No comments:
Post a Comment