Skip to main content

Simple Slider show using Javascript - JS Slide show script

Simple Slider show using Javascript

The following script will populate the slider container control with the contents in the slider content js array in regular interval of time. Here You can pause the slider on mouse over and later resume the slider on mouseout events.

Sample Javascript code is given below:

Save the following script as  slider.js

//--------- CODE STARTS -------

var mbSlider=new Array();

arrSlide[0]= 'HTML Content in Slide1';

arrSlide[1]= 'HTML Content in Slide2';



var slide_count=arrSlide.length;
var slide_ind=0;
var slide_speed=5000;
var slide_int;

//function to fill slide content to the slider ctrl
function displaySlide( ){

 if( slide_ind == slide_count || slide_ind < 0 )
  slide_ind=0;

document.getElementById('slide_contents').innerHTML=arrSlide[slide_ind];
slide_ind ++;

}

//function to pause slide show
function pauseSlide(){
clearInterval(slide_int);
}

//function to continue slide show
function runSlide(){
slide_int = setInterval("displaySlide()", slide_speed);
}

//start  slider
runSlide();




//--------- CODE ENDS -------


How to display slide in HTML  Page?

IN the html page

//--------- CODE STARTS -------
<html>
<head>
<title>Test Slide</title>
<script src="slider.js" type="text/javascript" ></script>
</head>
<body onload="runSlide()">

<div id="slide_contents">
Default content in slider container
</div>
</body>
</html>

//--------- CODE ENDS -------





Comments

Popular posts from this blog

Intex Aqua 5.5 VR Plus genuine Review - Dont Buy Intex Aqua 5.5 VR Plus - Board complaint and low battery backup issues

Intex Aqua 5.5 VR Plus  Review - Dont Buy Intex Aqua 5.5 VR + - Board complaint and low battery backup issues I bought an Intex Aqua 5.5 VR Plus on April 23, 2018, With in a week it started to show Battery backup issues. Even if it is charged full, it will completely drain out with in 12 or 13 hours. During this time No internet was used, only 2 or 3 calls were done. Some times there was issues with net connection also.

Deep-sea Anglerfish Black Seadevil Scary looking creature Video

Deep-sea Anglerfish are the strange and elusive creature that are very rarely observed in their natural habitat. Fewer than half a dozen have ever been captured on film or video by deep-diving research vehicles.They are mostly  found in tropical to temperate waters of the Indian,Pacific and Atlantic Oceans.

How to use WiFi adapter on Ubuntu 16.04 desktop PC - Realtek RTL8188EUS 802.11n Wireless USB Network Adapter Driver installation

Installation of Realtek RTL8188EUS 802.11n Wireless USB Network Adapter on Desktop PC having Ubuntu 16.04 OS My PC is running in Ubuntu 16.04 OS, recently I thought of using a dongle wife adapter to access our home's Wifi network. For this I used Realtek RTL8188EUS 802.11n Wireless USB Network Adapter ( Model No: OT-WUA950NM ) This small device cost around Rupees 250/- to Rs 300/- in India. I did the following steps for installation of this Realtek Nano Wifi Adapter: Plug Realtek RTL8188EUS 802.11n Wireless USB Network Adapter to your PC's USB port, Take the terminal application and run the command "lsusb" to list the plugged in usb devices: Myhome:~$ lsusb Bus 007 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub Bus 006 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub Bus 005 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub Bus 001 Device 003: ID 0bda:8179 Realtek Semiconductor Corp. R...


Urgent Openings for PHP trainees, Andriod / IOS developers and PHP developers in Kochi Trivandrum Calicut and Bangalore. Please Send Your updated resumes to recruit.vo@gmail.com   Read more »
Member
Search This Blog