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.
This is what i have so far!
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>Thanks in advance!!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"; }![]()




Reply With Quote

Bookmarks