Simple jQuery Slideshow

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="wrap">
      <div id="photos">
        <img src="http://lorempixel.com/475/264/sports/1" alt="sports_image_1" />
        <img src="http://lorempixel.com/475/264/sports/2" alt="sports_image_2" />
        <img src="http://lorempixel.com/475/264/sports/3" alt="sports_image_3" />
        <img src="http://lorempixel.com/475/264/sports/4" alt="sports_image_4" />
        <img src="http://lorempixel.com/475/264/sports/5" alt="sports_image_5" />
        <!-- add more images here -->
      </div>
      <span id="prev"></span>
      <span id="next"></span>
      <!-- view scripts.js for more information -->
    </div>
  </body>

</html>

// Code goes here

$(document).ready(function() {
		
		// set variables
		var oCurPhoto;
		var oNxtPhoto;
		var oCurDot;
		var oNxtDot;
    var oChangePhoto;
    var q;
		
		// get the total number of images
		var images = $('#photos img');

		// set up list that will display the dots based on number of images
		var output = '<ul id="dots">';

		// create dots while adding classes to both the dots list and the images
		for (var i = 0; i < images.length; i++) {
			// if its the first item 
			if (i === 0) {

				// add a class of current to the image and selected to the dots list + numeric class so we can link the dots list and images 
				$('#photos img').eq(i).addClass('current 1');
				output += '<li class="selected 1">';

			} else {

				// else just add numeric class
				$('#photos img').eq(i).addClass(i);
				output += '<li class="'+[i+1]+'">';
			}

			// close out the list item
			output += '</li>';
		}

		// end list
		output += '</ul>';

		// add the list below the images
		$('#photos').after(output);

		// set up the listeners for button and dot clicks
		$('#next').click(newImg);
		$('#prev').click(newImg);
		$('#dots li').click(selectImg);

		// timer fade - currently set to 4 seconds
		setInterval(function(){moveImg()}, 4000);
	});
	
	function selectImg() {
		
		// remove the selected class
		$('#dots li.selected').removeClass('selected');

		// grab the remaining class - which in this case is a numeric value
		q = this.className;

		// match 0 based array but decrementing numeric value
		q--;

		// set the current photo and dot
		oCurPhoto = $('#photos img.current');
		oNxtPhoto = $('#photos img').eq(q);


		// add the class selected to the new dot
		$(this).addClass('selected');

		// remove the current class from the current image and add animation
		oCurPhoto.removeClass('current').addClass('previous');
		oNxtPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000,
			function(){
				oCurPhoto.removeClass('previous');
			});

	}

	function newImg() {
		
		// Get the id of the button that was pushed - this way we only use one function with conditional statements  
		oChangePhoto = this.id;

		oCurDot = $('#dots li.selected').removeClass('selected');
		oCurPhoto = $('#photos img.current');

		// depending on button pushed show next / previous image and change dot class
		if (oChangePhoto == 'next') {
			
			// set the next photo and dot items to the next in the list
			oNxtPhoto = oCurPhoto.next();
			oNxtDot = oCurDot.next();

			// if there are no more list items go to the first
			if (oNxtPhoto.length === 0) {
				oNxtPhoto = $('#photos img:first');
				oNxtDot = $('#dots li:first');
			}

		} else if (oChangePhoto == 'prev') {

			// set the next photo and dot items to the previous in the list
			oNxtPhoto = oCurPhoto.prev();
			oNxtDot = oCurDot.prev();
			if (oNxtPhoto.length === 0) {

				// if there are no more list items go to the last item
				oNxtPhoto = $('#photos img:last');
				oNxtDot = $('#dots li:last');
			}
		}
		
		// add the class selected to the new dot
		oNxtDot.addClass('selected');

		// remove the current class from the current image and add animation
		oCurPhoto.removeClass('current').addClass('previous');
		oNxtPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000,
			function(){
				oCurPhoto.removeClass('previous');
			});
	}

	function moveImg(){
		oCurDot = $('#dots li.selected').removeClass('selected');
		oCurPhoto = $('#photos img.current');
		oNxtPhoto = oCurPhoto.next();
		oNxtDot = oCurDot.next();
		if (oNxtPhoto.length === 0) {
			oNxtPhoto = $('#photos img:first');
			oNxtDot = $('#dots li:first');
		}
		oNxtDot.addClass('selected');
		oCurPhoto.removeClass('current').addClass('previous');
		oNxtPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000,
			function(){
				oCurPhoto.removeClass('previous');
			});
	}

/* Styles go here */
#wrap { width: 475px;}

#photos {
	position: relative;
	width: 475px;
	height: 264px;
	clear: both;
}

#photos img {
	position: absolute;
	z-index: 0;
}

#photos .previous {
	z-index: 1;
}

#photos .current {
	z-index: 2;
}

#switch {
	cursor: pointer;
}

#dots {
	padding: 0;
	margin-left: 160px;
}

#next,
#prev,
#dots li {
	background-image: url('http://chrisskinner.co/lab/slideshow/dot.gif');
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

#dots li {
	background-position: 0 0;
	list-style-type: none;
	display: inline-block;
	margin-right: 10px;
}
#dots li:hover,
#dots .selected {	background-position: -20px 0; }

#next,
#prev { position: relative; z-index: 1; top: -40px;}

#next {
	float: right;
	background-position: 0 -20px;
}
#prev {
	float: left;
	background-position: -20px -20px
}

Simple jQuery Slideshow

Expand the slideshow by just adding new img tags in slideshow.html

As long as the next and previous slideshow buttons have the id's of 'next' and 'prev', respectively, you can change them to what ever you like. img, span, div button or otherwise.

To stop the automatic slideshow comment or out or remove setInterval(function(){moveImg()}, 4000);