JavaScript

To start off with JavaScript I would like to explain the reason why we setup two script tags. The first script tag refers to jQuery which is stored on Google’s website but can be downloaded here. The second script tag is the location of our created JavaScript file in which will reference commands from the jQuery script tag.

// JavaScript Document
var i = 0;
var imax = 1;
var ssMove = 874;

function slideNext() {
	if(i < imax) {
		i++;
		var setMove = -1 * (874 * i);
		$('#SlideShow ul').stop().animate({'marginLeft':setMove+'px'},350);
	} else {
		i = 0;
		var setMove = -1 * (874 * i);
		$('#SlideShow ul').stop().animate({'marginLeft':setMove+'px'},350);
	}
	
	return false;
}

function slideLast() {
	if(i > 0) {
		i = i - 1;
		var setMove = -1 * (874 * i);
		$('#SlideShow ul').stop().animate({'marginLeft':setMove+'px'},350);
	} else {
		i = imax;
		var setMove = -1 * (874 * i);
		$('#SlideShow ul').stop().animate({'marginLeft':setMove+'px'},350);
	}
	
	return false;
}

SlideShow = setInterval ( "slideNext()", 10000);
        

I am not going to break down the code all the way since this is a basic HTML & CSS template. I included the JavaScript to allow you to have a functioning slideshow. So first off we setup basic standard default properties like i, imax, ssMove. Simple breakdown of these is I is the current slide it’s on, imax is the amount of slides there are but remember you always start from 0 so the max is 1 if you have two. Finally there is ssMove which is the amount of pixels it will move each slide in this case our slides 874 pixels.

Furthermore we have two functions to setup first one is the Next button the second is the Back Button. These functions use the default properties we setup to formulate the formula of movement. Final you will see a property by its self called SlideShow this is a timer variable in case we need to stop the Slideshow or Move the slideshow. This timer goes off every 10 seconds meaning the slide moves every ten seconds. That is our JavaScript section. Click the Conclusion to compare our outcomes of the design.