HTML and CSS

looking for code to scroll images

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Dec 2008

Posts: 2

Reputation: ryan12193 is an unknown quantity at this point

Solved Threads: 0

ryan12193

Offline

Newbie Poster

looking for code to scroll images

Sep 23rd, 2009

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.

•

Join Date: Mar 2008

Posts: 315

Reputation: Thirusha is an unknown quantity at this point

Solved Threads: 50

Thirusha

Offline

Posting Whiz

Re: looking for code to scroll images

Sep 23rd, 2009

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

Life... Is a Moment

•

Join Date: May 2008

Posts: 302

Reputation: sreein1986 is an unknown quantity at this point

Solved Threads: 33

sreein1986 sreein1986 is offline

Offline

Posting Whiz

Re: looking for code to scroll images

Sep 24th, 2009

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<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>
<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>

Last edited by sreein1986; Sep 24th, 2009 at 12:30 pm.

Thanx,
Shiriyal
http://shiriyal.blogspot.com/
if you problem solved add me as a reputation and mark it mark as solved

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes