troubleshooting Question

Code to change background image of table

Avatar of wilkesit
wilkesit asked on
JavaScript
14 Comments1 Solution529 ViewsLast Modified:
Hi

tommyBoy gave me an excellent piece of code to fade images.

I need to adjust it so it can cycle through 5 background images as follows

<td height="406" valign="top" background="images/slider.jpg">

It doesn't need to automatically select, I can set the images manually, but the javascript below just needs to be adjusted to the background above will cycle slider1.jpg, slider2.jpg, slider3.jpg etc

Many thanks

Matt


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

var index = 0;

function layerScroll() {
	// set index number
	if (index == $('.ls-layer').length - 1) {
		index = 0;
	} else {
		index ++;
	}
	var current = index;
	// fade in next slide
	$('.ls-layer').eq(index).fadeIn(2000, function(){
	});
	if (current == 0) {
		current = $('.ls-layer').length;
	}
	// fade out current slide
	$('.ls-layer').eq(current - 1).fadeOut(2000);
	
}

$(document).ready(function(){
	
	   var layerSpeed = 5000; //set duration for each slide here
		
	   // timer for large image fader
	   var layerTimer = setInterval(function() { layerScroll(); }, layerSpeed);
		
		
});
</script>
<style>
#main {
	width: 100%;  
	margin: 0 auto;
	position: relative;
	height: 100%;     
	overflow: hidden;  
}
/* ==========================================================================
   Large Image Fader
   ========================================================================== */

.ls-layer {
	position: absolute;
	display: none;
	background-position: top left;
	background-repeat: no-repeat;
	overflow: hidden;
	float: left; 
	width: 100%;
}
</style>
</head>

<body>
<div id="main">
<!-- LayerSlider wrapper -->
				<div id="layerslider" style="width: 100%; height: 700px; margin: 0 auto; padding: 0 ">
					
					<!-- Slide 1 -->
					<img class="ls-layer" src="http://www.wallpaperswala.com/wp-content/gallery/kerala-scenery/kerala-nature-beautiful-scenery.jpg" alt="" />
                    <!-- Slide 2 -->
					<img class="ls-layer" src="http://www.wallpaperswala.com/wp-content/gallery/natural-scenery/natural-scenery-photos.jpg" alt="" />
                    <!-- Slide 3 -->
					<img class="ls-layer"src="https://d22d7v2y1t140g.cloudfront.net/m_1394387_lgdLaipbl8nw.jpg" alt="" />
                    
                </div><!-- /LayerSlider wrapper -->
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
Alexandre Simões
Software Architect

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 14 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 14 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros