954,598 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

looking for code to scroll images

I am building a website with many images. I am looking for a code that will scroll my images. i am looking for it to show like 3 pics then have arrows on either side so when you clik them (arrows) it will scroll to the next 3 pics. i have only been doing Xhtml and CSS for about 2 years so i am pretty new at this.

ryan12193
Newbie Poster
3 posts since Dec 2008
Reputation Points: 10
Solved Threads: 0
 

I dont have one, but try google, there are loads of examples out there. You can search for "sroll images script" or "image slideshow"

Thirusha
Posting Whiz
357 posts since Mar 2008
Reputation Points: 36
Solved Threads: 57
 

Hi Use below Javascript where you want scrolling images in your html page

<SCRIPT LANGUAGE="JavaScript">
var interval = 2; // delay between rotating images (in seconds)
var random_display = 0; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list = new Array();
image_list[image_index++] = new imageItem("../Images/cdsamples/cd1.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd2.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd3.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd4.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd5.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd6.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd7.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd8.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd9.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd10.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd12.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd13.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd14.jpg"); // Your Image URL here
image_list[image_index++] = new imageItem("../Images/cdsamples/cd15.jpg"); // Your Image URL here
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
//  End -->
</SCRIPT>
sreein1986
Posting Whiz
306 posts since May 2008
Reputation Points: 12
Solved Threads: 34
 

Hey - I added the javascript to the page, but it's not working, is there some more code I'm missing, or something else I need to do? please advise

savageocean
Newbie Poster
1 post since Jul 2010
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: