Beginning JavaScript :: page 225 - Automated Slideshow

In this example below you will see how to do a Beginning JavaScript :: page 225 - Automated Slideshow with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Kayzah, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Kayzah ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Beginning JavaScript :: page 225 - Automated Slideshow</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Inline Slides</h1>

<ul class="slides">
  <li><img src="http://www.beginningjavascript.com/Chapter6/pictures/thumbs/cat2.jpg" alt="" /></li>
  <li><img src="http://www.beginningjavascript.com/Chapter6/pictures/thumbs/dog10.jpg" alt="" /></li>
  <li><img src="http://www.beginningjavascript.com/Chapter6/pictures/thumbs/dog12.jpg" alt="" /></li>
  <li><img src="http://www.beginningjavascript.com/Chapter6/pictures/thumbs/dog63.jpg" alt="" /></li>
  <li><img src="http://www.beginningjavascript.com/Chapter6/pictures/thumbs/dog7.jpg" alt="" /></li>
  <li><img src="http://www.beginningjavascript.com/Chapter6/pictures/thumbs/donkeyeating.jpg" alt="" /></li>
  <li><img src="http://www.beginningjavascript.com/Chapter6/pictures/thumbs/kittenflat.jpg" alt="" /></li>
</ul>
  <script src='http://www.beginningjavascript.com/DOMhelp.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Kayzah/beginning-javascript-page-225-automated-slideshow-yhqiu */
*{
	margin:0;
	padding:0;
}
body{
	font-family:Arial, Sans-Serif;
	color:#666;
	padding:2em;
	background:#fff;
}
h1{
	font-size:.8em;
	padding:.5em 0
}

/* Non - JavaScript */
.slides, .slides li{
	margin:0;
	padding:5px;
	list-style:none;
}
.slides img{
	display:block;
}
.slides{
	background:#ccc;
	width:420px;
	float:left;
}
.slides li{
	float:left;
}
/* JavaScript */
.dynslides{
	margin:0;
	padding:0;
	width:210px;
	border:1px solid #000;
	background:#eee;
}
.dynslides li{
	display:none;
	margin:0;
	padding:2px;
}
.dynslides img{
     display:block;
}
.dynslides li.show{
	display:block;
}
.hide{
	visibility:hidden;
}
p.slidecounter{
	color:#333;
	background: #fff;
	font-family:arial,sans-serif;
	font-size:.8em;
	margin:0 0 .5em 0;
	width:210px;
	border:1px solid #000;
	border-top:none;
	text-align:center;
}
p.slidecounter a img{
	border:none;
	vertical-align:bottom;
}
p.slidecounter a{
	text-decoration:none;
	color:#000;
}
p.slidecounter span{
	padding:0 5em;
}

/*Downloaded from https://www.codeseek.co/Kayzah/beginning-javascript-page-225-automated-slideshow-yhqiu */
autoSlides = {
  // CSS classes
  slideClass : 'slides',
  dynamicSlideClass : 'dynslides',
  showClass : 'show',
  slideCounterClass : 'slidecounter',
  
  // Labels
  // Play and stop links, you can use any HTML here.
  playLabel : '<img src="http://www.beginningjavascript.com/Chapter6/control_play_blue.png" alt="play">',
  stopLabel : '<img src="http://www.beginningjavascript.com/Chapter6/control_stop_blue.png" alt="stop">',
  // Counter text. # will be replaced by the actual image number, % by the number of all pictures.
  counterLabel : '# of %',
  
  // Animation delay in milliseconds
  delay : 1000,
  
  init : function() {
    if( ! document.getElementById || ! document.createTextNode) {return;}
    
    var uls = document.getElementsByTagName( 'ul' );
    autoSlides.slideLists = new Array();
    
    for ( i = 0; i < uls.length; i++ ) {
      if ( !DOMhelp.cssjs( 'check', uls[i], autoSlides.slideClass ) ) {
        continue;
      }
      
      DOMhelp.cssjs( 'swap', uls[i], autoSlides.slideClass, autoSlides.dynamicSlideClass );
      uls[i].currentSlide = 0;
      uls[i].showIndex = i;
      
      autoSlides.initSlideShow( uls[i] );
      autoSlides.slideLists.push( uls[i] );
    }
  },
  
  initSlideShow : function( o ) {
    var p,
        temp;
    p = document.createElement( 'p' );
    DOMhelp.cssjs( 'add', p, autoSlides.slideCounterClass );
    o.parentNode.insertBefore( p, o.nextSibling );
    o.play = DOMhelp.createLink( '#', ' ' );
    o.play.innerHTML = autoSlides.playLabel;    
    DOMhelp.addEvent( o.play, 'click', autoSlides.playSlide, false );    
    
    // ? An Stelle von o.play verschieben?
    o.count = document.createElement( 'span' );
    temp = autoSlides.counterLabel.replace( /#/, o.currentSlide + 1 );
    // ? temp = autoSlides.counterLabel.replace( /%/, o.getElementsByTagName( 'li' ).length );
    temp = temp.replace( /%/, o.getElementsByTagName( 'li' ).length );
    o.count.appendChild( document.createTextNode( temp ) );
    
    p.appendChild( o.count );
    p.appendChild( o.play );
    
    temp = o.getElementsByTagName( 'li' )[o.currentSlide];
    DOMhelp.cssjs( temp, 'add', autoSlides.showClass );
    // safari
    o.play.onclick = DOMhelp.safariClickFix;
  },
  
  playSlide : function( e ) {
    var t = DOMhelp.getTarget( e );
    while ( t.nodeName.toLowerCase() != 'a' && t.nodeName.toLowerCase() != 'body' ) {
      t = t.parentNode;
    }
    var parentList = DOMhelp.closestSibling( t.parentNode, -1 );
    // ? Which one is parentList?
    console.log( parentList );
    
    // Test if parentlist already has property 'loop'.
    if( !parentList.loop ) {
      // Maybe the most complex part of the script?
      var loopCall = "autoSlides.showSlide( '" + parentList.showIndex + "' )";
      parentList.loop = window.setInterval( loopCall, autoSlides.delay );
      
      t.innerHTML = autoSlides.stopLabel;
    } else {
      window.clearInterval( parentList.loop );
      parentList.loop = null;
      
      t.innerHTML = autoSlides.playLabel;
    }
    DOMhelp.cancelClick ( e );
  },
  
  showSlide : function ( showIndex ) {
    var currentShow = autoSlides.slideLists[showIndex],
        count = currentShow.currentSlide,
        photoCount = currentShow.getElementsByTagName( 'li' ).length,
        photo = currentShow.getElementsByTagName( 'li' )[count];
      
    DOMhelp.cssjs( 'remove', photo, autoSlides.showClass );
    count ++;
    if ( count == photoCount) {
      count = 0;
    }
    
    photo = currentShow.getElementsByTagName( 'li' )[count];
    DOMhelp.cssjs( 'add', photo, autoSlides.showClass );
    var counterText = currentShow.count.firstChild;
    counterText.nodeValue = counterText.nodeValue.replace( /\d/, count + 1 );
    currentShow.currentSlide = count;
  }
};

DOMhelp.addEvent( window, 'load', autoSlides.init, false );

Comments