Medical Factors Which make it The most effective just by Sejal Kakadiya Medicine and health agencies with now consentrate on top quality, charge together with great satisfaction health of their solutions. These are typically that support beams which a lot of these agencies redefine the direction they trade. The following really results in thrilled clients. How come Serious Treatment Direction Can be a Trend Inside Medicine and health Sector just by Steven Orange A whole lot of North american healthcare systems' options are generally about that direction together with procedure with serious circumstances. Direction with serious health conditions which include diabetes, excessive circulation demand, cardiovascular disease, together with hypothyroidism can be a vital component of easiest treatment healthcare provider's succeed. Inside standard product, that general practitioner spots someone on an automobile accident with treatment, inspects that condition ...
Most of our visitors asked "How to Add Multiple Slideshows on One Page Using JavaScript" by commenting on different previous posts for JavaScript slideshow and going to write this post about to add multiple slideshows on the same page. Using this script you can add number of slideshows on single page as your requirements.
Multiple Slideshows on One Page Using JavaScript
To make multiple slideshows, at first you have to make variable lists for each slideshows and have to create new slideshow using function slideshow( ). Here I have created two slideshows with variables SlideList1 and SlideList2 and uses function slideshow with parameters slideList, image, speed and name.
You can create number of new slideshows using this function below using new keyword. i.e. var slideshow1=new slideshow(slideList1, 'slide1', 3000, 'slideshow1');
function SlideShow(slideList, image, speed, name)
{
this.slideList = slideList;
this.image = image;
this.speed = speed;
this.name = name;
this.current = 0;
this.timer = 0;
}
And the another function switchImage( ) given below allows you to change images while playing slideshows.
function switchImage(imgName, imgSrc)
{
if (document.images)
{
if (imgSrc != "none")
{
document.images[imgName].src = imgSrc;
}
}
}
Here is a full JavaScript code for making multiple slideshows on one page using JavaScript. Copy the following codes inside body tag of your HTML file and replace given image source <img src=" "> with your image source.
<img src="image1.gif" name="slide1">
<img src="image2.gif" name="slide2">
<script type=text/javascript>
var SlideList1 = ['image1.gif', 'image2.gif', 'image3.gif'];
var SlideShow1 = new SlideShow(SlideList1, 'slide1', 3000, "SlideShow1");
var SlideList2 = ['image4.gif', 'image5.gif', 'image6.gif'];
var SlideShow2 = new SlideShow(SlideList2, 'slide2', 1000, "SlideShow2");
function SlideShow(slideList, image, speed, name)
{
this.slideList = slideList;
this.image = image;
this.speed = speed;
this.name = name;
this.current = 0;
this.timer = 0;
}
function switchImage(imgName, imgSrc)
{
if (document.images)
{
if (imgSrc != "none")
{
document.images[imgName].src = imgSrc;
}
}
}
SlideShow.prototype.play = SlideShow_play;
function SlideShow_play()
{
with(this)
{
if(current++ == slideList.length-1) current = 0;
switchImage(image, slideList[current]);
clearTimeout(timer);
timer = setTimeout(name+'.play()', speed);
}
}
window.onLoad=SlideShow1.play();SlideShow2.play();
</script>
Here the speed of first and second slideshows are specified 3000 and 1000 respectively, your can change them as your requirements. Also you can add more slideshows by adding more slideList and slideshow variables.
Preview of JavaScript Code Given Above


You can add custom CSS codes to give different styles like setting border using border: property, give rounded corners using border-radius property as presented in the previous post "How to make rounded corners border using CSS" and can give different animation effects like fade effects, zoom effects, slide effects etc.
You can refer to the following previous posts to give fade effect animations using CSS, JavaScript or JQuery codes.
- How to create fade effect image slideshow using CSS
- How to Create Simple JavaScript Fade Effect Animation?
- Simple JavaScript Fade Effect Animation Using Jquery
Related Posts:
- How To Create Simple Image Slideshow Using JavaScript ?
- Image Slideshow with Navigation Buttons Using JavaScript
- How to Create JavaScript Image Slideshow with LInks
- How to Display Date Format in JavaScript?
- How to Create a Digital Clock in JavaScript?
- What are the Different Ways to Redirect Page in JavaScript?
- How to Detect Visitor's Browser Using JavaScript?
Comments
Post a Comment