0

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.

4
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by savageocean
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"

0

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>

Edited by sreein1986: n/a

-1

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.