...

View Full Version : pure javascript image slider with onclick



gerble1000
07-24-2012, 07:06 PM
i am starting a new project and need help please :)
i will have a varied number of game covers and will need to scroll left to right smoothly and when end image out of screen ad a new one at beginning.
i am sure this one has been made before but i want to try and build one :)
i am stuck on the part where it needs to remove the image when it reaches the end and then add a new image at the start
i get the feeling i am going about this all wrong but could somebody tell me the best way to do this and dont say jquery :)


<head>
<script>

function updateimagesright(i)
{
var positionofimage = document.getElementById("images").style.marginLeft;

if(positionofimage.length==0){positionofimage = '0px';}
positionofimage = positionofimage.substring(0, positionofimage.length - 2)
i = parseInt(positionofimage);

i = i + 5;

var t = setTimeout(function () {
document.getElementById("images").style.marginLeft = i + "px";


if (i < 600) updateimagesright(i);
},10);
}

function updateimagesleft(i)
{
var positionofimage = document.getElementById("images").style.marginLeft;

if(positionofimage.length==0){positionofimage = '0px';}
positionofimage = positionofimage.substring(0, positionofimage.length - 2)
i = parseInt(positionofimage);

i = i - 5;

var t = setTimeout(function () {
document.getElementById("images").style.marginLeft = i + "px";


if (i > -600 && i > 0) updateimagesleft(i);
},10);
}

</script>
</head>
<body>

<div style ="position:absolute;top:100px;left:50%;margin-left:-310px;border:5px solid black; width:620px; height:150px;">
<div style="position:absolute; top:25px" id="images" >
<img src="images/1.jpg" width="100px">
<img src="images/2.jpg" width="100px">
<img src="images/3.jpg" width="100px">
<img src="images/4.jpg" width="100px">
<img src="images/5.jpg" width="100px">
<img src="images/6.jpg" width="100px">
</div></div><p>

<center>
<input type="button" value=" << " onclick="updateimagesright();">
<input type="button" value=" >> " onclick="updateimagesleft();">
</center>


</body>

gerble1000
07-24-2012, 08:18 PM
here is the running example
http://kevs-gardening.co.uk



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum