JavaScript Slideshow Content

Javascript Course

With the script presented in this page you can create a Simple Slideshow effect with any type of content in your web page: images, menu links, texts, etc. (without jQuery or other JavaScript framework).
This JavaScript Slideshow is simple and easy to customize, you can add Start, Stop, Previous, and Next buttons for slideshow, or to load the effect after the page loads.

• To Download the examples presented below, click: Simple JavaScript Slideshow Content.
- To see examples, click: Demo.

Instructions Slideshow Content script

To use this script in your web page, follow this steps:
1. In the place you want to show the slideshow, create a DIV with id="slshow", in this DIV add the images, menus, paragraphs, or other HTML elements for slideshow, with class="slshowc" to each element.
- The first element must have id="firstsls" because, initially all items with class="slshowc" are hiidden but the item with id="firstsls" is displayed.
Example of HTML code with three items for slideshow:

<div id="slshow">
 <img src="img.jpg" width="125" height="125" alt="Slideshow effect" class="slshowc" id="firstsls" />
 <ul class="slshowc">
  <li><a href="https://coursesweb.net/html/" title="HTML Course">HTML Course </a></li>
  <li><a href="https://coursesweb.net/css/" title="CSS Course">CSS Course </a></li>
  <li><a href="https://coursesweb.net/javascript/" title="JavaScript Course">JavaScript Course </a></li>
 </ul>
 <div class="slshowc">
  <h4>Image 2</h4>
  <img src="imgs/img2.jpg" width="125" height="125" alt="Slideshow content" /><br/>
  - Description Image 2.
 </div>
</div>

2. In the CSS style of the page add these CSS properties:

/* Slideshow */
#slshow .slshowc {
 display: none;
}
#slshow #firstsls {
 display:  block;
}

3. At the end of the HTML document, before the closing tag </body>, add this JavaScript script:

<script type="text/javascript"><!--
// Here sets the frequency for chenging elements (in milliseconds, 1000 = 1 sec.)
var frequency = 1300;

// object for slideshow effect
var slshow = new Object();
// Free JavaScript Course: https://coursesweb.net/javascript/
 slshow.fun = '';               // store a string that indicate how the Slideshow to work
 slshow.slshowc = [];           // will contain all Tags in #slshow, with class="slshowc"
 slshow.nrslshowc = 0;          // the number of elements in slshowc Array
 slshow.nslshowc = 0;           // used to store the index of current "slshowc" item to show

 // adds in "slshowc" property all Tags in #slshow, with class="slshowc"
 slshow.setSlshowc = function() {
  var slshowdivs = document.getElementById('slshow').children;
  var nr_slshowdivs = slshowdivs.length;
  var ic = 0;
  for(var i=0; i<nr_slshowdivs; i++) {
    if(slshowdivs[i].className == 'slshowc') {
      this.slshowc[ic] = slshowdivs[i];
      ic++;
    }
  }
  this.nrslshowc = this.slshowc.length;
 }

 // define the index of the item to display, then shows it
 slshow.sBackNext = function() {
  if(this.fun == 'back' || this.fun == 'goback' || this.fun == 'next' || this.fun == 'gonext') {
    if(this.fun == 'back' || this.fun == 'goback') {
      this.nslshowc--;
      if(this.nslshowc <0) this.nslshowc = this.nrslshowc - 1;
    }
    else if(this.fun == 'next' || this.fun == 'gonext') {
      this.nslshowc++;
      if(this.nslshowc >= this.nrslshowc) this.nslshowc = 0;
    }

    // hides all elements in "slshowc" property
    // display the element in "slshowc" property with index from 'nimg'
    // auto call this function if "fun" is 'goback' or 'gonext'
    for(var i=0; i<this.nrslshowc; i++) {
      this.slshowc[i].style.display = 'none';
    }
    this.slshowc[this.nslshowc].style.display = 'block';
    if(this.fun == 'goback' || this.fun == 'gonext') setTimeout('slshow.sBackNext()', frequency);
  }
 }

 // sets value of "fun" property, calls the function to set elements in "nrslshowc" (if not set)
 // calls the sBackNext() to show the element according to "fun"
 slshow.sShow = function(f) {
  this.fun = f;
  if(this.nrslshowc == 0) this.setSlshowc();
  if(this.fun == 'back' || this.fun == 'goback' || this.fun == 'next' || this.fun == 'gonext') this.sBackNext(this.fun);
 }

// Removes the three slashes "///" if you want the slideshow to auto starts after page loads
/// slshow.sShow('gonext');
// -->
</script>

- To change the interval of appearing the elements in slideshow, modify the value of the frequency variable, in milliseconds. Initially is set 1300 (1.3 seconds).

Setting the Slideshow controls

1. If you want the slideshow effect to auto start after the page loads, removes the three slashes "///" from this line of code, at the end in the JS script.
2. To start the Slideshow, just calls the method: slshow.sShow('gonext').
- For exampe, this button will start the Slideshow when the user clicks on it:

3. To stop the Slideshow, just calls the method: slshow.sShow('stop').
- For exampe, this button will stop the Slideshow when the user clicks on it:
4. To show the next element, just calls the method: slshow.sShow('next').
- For exampe, this button will show the next element when the user clicks on it:
5. To show the previous element, just calls the method: slshow.sShow('back').
- Example:
6. To display continuously the next element (one by one), just calls the method: slshow.sShow('gonext').
- For exampe, this button will display the items one by one when the user has the mouse over button, and the Slideshow stops when the mouse cursor leaves the button:
7. To display continuously the previous element (one by one), just calls the method: slshow.sShow('goback').
- For exampe, this button will display the items one by one in reverse order when the user has the mouse over button, and the Slideshow stops when the mouse cursor leaves the button:

Demo

1. Slideshow with images, Title and Description to each image; Start, Stop, Back, and Next buttons.
- Code:

<style>
/* Slideshow */
#slshow .slshowc {
 display: none;
}
#slshow #firstsls {
 display: block;
}
</style>

<div id="slshow">
 <div class="slshowc"id="firstsls" >
  <h4>Image 1</h4>
  <img src="img1.jpg" width="125" height="125" alt="Slideshow content" /><br/>
  - Description Image 1.
 </div>
 <div class="slshowc">
  <h4>Second image</h4>
  <img src="img2.jpg" width="125" height="125" alt="Second image" /><br/>
  - Description Second image.
 </div>
 <div class="slshowc">
  <h4>Image 3</h4>
  <img src="img3.jpg" width="125" height="125" alt="Slideshow images" /><br/>
  - Description Image 3.
 </div>
</div>
<button onclick="slshow.sShow('gonext')">Start</button> - 
<button onclick="slshow.sShow('stop')">Stop</button> / 
<button onclick="slshow.sShow('back')">&lt;- Back</button> | 
<button onclick="slshow.sShow('next')">Next -&gt;</button>

<script type="text/javascript"><!--
   /* Here adds the JavaScript script for Slideshow */
// -->
</script>

Result (click on buttons):

2. Slideshow with mixed content: image, Menu and Text content. Buttons <<- and ->> with action on mouse over.
- Code:

<style>
/* Slideshow */
#slshow {
 position: relative;
 height: 130px;
 width: 25em;
 margin-left: 50px;
 border: 1px solid blue;
 text-align: center;
}
#slshow .slshowc {
 display: none;
 height: 110px;
 margin: 2px auto;
 overflow: auto;
}
#slshow #firstsls {
 display:  block;
}

/* Buttons */
#goback {
 position: absolute;
 top: 45%;
 left: -43px;
 width: 40px;
}
#gonext {
 position: absolute;
 top: 45%;
 right: -43px;
 width: 40px;
}
</style>

<div id="slshow">
 <img src="img1.jpg" width="100" height="100" alt="Slideshow effect" class="slshowc" id="firstsls" />
 <ul class="slshowc">
  <li><a href="https://coursesweb.net/html/" title="HTML Course">HTML Course </a></li>
  <li><a href="https://coursesweb.net/css/" title="CSS Course">CSS Course </a></li>
  <li><a href="https://coursesweb.net/javascript/" title="JavaScript Course">JavaScript Course </a></li>
 </ul>
 <div class="slshowc"><br/><br/>
  With the JavaScript script presented in this page you can create a Slideshow effect with any type of content in your web page.
 </div>
 <button id="goback" onmouseover="slshow.sShow('goback')" onmouseout="slshow.sShow('stop')">&lt;&lt;-</button>
 <button id="gonext" onmouseover="slshow.sShow('gonext')" onmouseout="slshow.sShow('stop')">-&gt;&gt;</button>
</div>

<script type="text/javascript"><!--
   /* Here adds the JavaScript script for Slideshow */
// -->
</script>

Result (position the mouse over buttons):

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net