https://smiththerm.com/js/slider.js

1/*
2* Author:      Marco Kuiper (http://www.marcofolio.net/)
3*/
4
5// Speed of the automatic slideshow
6var slideshowSpeed = 5000;
7
8// Variable to store the images we need to set as background
9// which also includes some text and url's.
10var photos = [ {
11		"title" : "Stairs",
12		"image" : "banner_01.jpg",
13		"url" : "http://www.sxc.hu/photo/1271909",
14		"firstline" : "Excellent Thermal Insulation",
15		"secondline" : "Natural mica has extremely high heat resistance; transparency; optical clarity; flexibility; flatness and is unbreakable. "
16	}, {
17		"title" : "Office Appartments",
18		"image" : "banner_02.jpg",
19		"url" : "http://www.sxc.hu/photo/1265695",
20		"firstline" : "WIDE RANGE OF APPLIANCES",
21		"secondline" : "work?"
22	}, {
23		"title" : "Mountainbiking",
24		"image" : "banner_03.jpg",
25		"url" : "http://www.sxc.hu/photo/1221065",
26		"firstline" : "ELECTRIC HEATING ELEMENTS",
27		"secondline" : "active"
28	}, {
29		"title" : "Mountains Landscape",
30		"image" : "banner_04.jpg",
31		"url" : "http://www.sxc.hu/photo/1271915",
32		"firstline" : "Take a fresh breath of",
33		"secondline" : "nature"
34	}
35];
36
37
38
39$(document).ready(function() {
40		
41	// Backwards navigation
42	$("#back").click(function() {
43		stopAnimation();
44		navigate("back");
45	});
46	
47	// Forward navigation
48	$("#next").click(function() {
49		stopAnimation();
50		navigate("next");
51	});
52	
53	var interval;
54	$("#control").toggle(function(){
55		stopAnimation();
56	}, function() {
57		// Change the background image to "pause"
58		$(this).css({ "background-image" : "url(images/btn_pause.png)" });
59		
60		// Show the next image
61		navigate("next");
62		
63		// Start playing the animation
64		interval = setInterval(function() {
65			navigate("next");
66		}, slideshowSpeed);
67	});
68	
69	
70	var activeContainer = 1;	
71	var currentImg = 0;
72	var animating = false;
73	var navigate = function(direction) {
74		// Check if no animation is running. If it is, prevent the action
75		if(animating) {
76			return;
77		}
78		
79		// Check which current image we need to show
80		if(direction == "next") {
81			currentImg++;
82			if(currentImg == photos.length + 1) {
83				currentImg = 1;
84			}
85		} else {
86			currentImg--;
87			if(currentImg == 0) {
88				currentImg = photos.length;
89			}
90		}
91		
92		// Check which container we need to use
93		var currentContainer = activeContainer;
94		if(activeContainer == 1) {
95			activeContainer = 2;
96		} else {
97			activeContainer = 1;
98		}
99		
100		showImage(photos[currentImg - 1], currentContainer, activeContainer);
101		
102	};
103	
104	var currentZindex = -1;
105	var showImage = function(photoObject, currentContainer, activeContainer) {
106		animating = true;
107		
108		// Make sure the new container is always on the background
109		currentZindex--;
110		
111		// Set the background image of the new active container
112		$("#sliderimg" + activeContainer).css({
113			"background-image" : "url(images/" + photoObject.image + ")",
114			"display" : "block",
115			"z-index" : currentZindex
116		});
117		
118		// Hide the header text
119		$("#slidertxt").css({"display" : "none"});
120		
121		// Set the new header text
122		$("#firstline").html(photoObject.firstline);
123		$("#secondline")
124			.attr("href", photoObject.url)
125			.html(photoObject.secondline);
126		$("#pictureduri")
127			.attr("href", photoObject.url)
128			.html(photoObject.title);
129		
130		
131		// Fade out the current container
132		// and display the header text when animation is complete
133		$("#sliderimg" + currentContainer).fadeOut(function() {
134			setTimeout(function() {
135				$("#slidertxt").css({"display" : "block"});
136				animating = false;
137			}, 500);
138		});
139	};
140	
141	var stopAnimation = function() {
142		// Change the background image to "play"
143		$("#control").css({ "background-image" : "url(images/btn_play.png)" });
144		
145		// Clear the interval
146		clearInterval(interval);
147	};
148	
149	// We should statically set the first image
150	navigate("next");
151	
152	// Start playing the animation
153	interval = setInterval(function() {
154		navigate("next");
155	}, slideshowSpeed);
156	
157});