Help with JavaScript slider!!
Hello,
I'm trying to make a simple slider using pure JavaScript! I kind of got it, but i cant get the rest of the images to show after clicking the first one.:eek:
This is what i have so far!:confused:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AWD My First Slide</title>
<link href="slide_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="slide.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<p style="text-align:center">HEADER</p>
</div><!-- end header -->
<h1>My First Slider</h1>
<div id="content">
<div id="slide_wrap">
<div id="left_a" onclick="moveSlide()"></div>
<div id="slider">
<div id="move">
<img name="" src="" width="800" height="534" alt="" style="background-color: #990000" border="0" />
<img name="" src="" width="800" height="534" alt="" style="background-color: #00F" border="0" />
<img name="" src="" width="800" height="534" alt="" style="background-color: #093" border="0" />
</div><!-- end move div -->
</div><!-- end slider -->
<div id="right_a" onclick="moveSlideLeft()"></div>
</div><!-- end slide wrap -->
</div><!-- end content-->
<div id="footer">
<p style="text-align:center">FOOTER</p>
</div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>
Code:
// JavaScript Document
var LEFTMARGINVALUE = 0;
var leftNav = document.getElementById('left_a').value;
var rightNav = document.getElementById('right_a').value;
function moveSlide()
{
if (LEFTMARGINVALUE >= 1) {
moveSlideLeft();
return;
}
LEFTMARGINVALUE +=800;
document.getElementById("move").style.marginLeft = LEFTMARGINVALUE + "px";
}
function moveSlideLeft()
{
if(LEFTMARGINVALUE == 0)
{
moveSlide();
return;
}
LEFTMARGINVALUE -=800;
document.getElementById("move").style.marginLeft = LEFTMARGINVALUE + "px";
}
Thanks in advance!!:D
