问题描述:

I am trying to create a manual image slideshow where new image links are returned from a php script. I'm having a problem where every dynamically added html tag is not following my javascript for the classes I am assigning them to.

I am echoing the html in the php identical to the background colors that are there by default. However, the images are all stacked on top of each other at first and when next is clicked they all disappear rather than changing the "active" one.

What am I missing to make this work?

The html:

<html>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

<script type = "text/javascript" src="jslider.js"></script>

<link rel="stylesheet" type="text/css" href="jslider.css">

</head>

<body>

<div id="slider-wrapper">

<div id="slider">

<div class="sp" style="background: blue;">akjdfalfkdj</div>

<div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>

<div class="sp" style="background: green;" >akjdfalfkdiyukjkhkj</div>

<div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>

</div>

</div>

<div id="nav"></div>

<div id="button-previous">prev</div>

<div id="button-next">next</div>

</body>

</html>

The javascript:

$(document).ready(function(){

$.ajax({url:'AmazonProduct.php',success:function(result){

$("#slider").html(result);

}});

$('.sp').first().addClass('active');

$('.sp').hide();

$('.active').show();

$('#button-next').click(function(){

$('.active').removeClass('active').addClass('oldActive');

if ( $('.oldActive').is(':last-child')) {

$('.sp').first().addClass('active');

}

else{

$('.oldActive').next().addClass('active');

}

$('.oldActive').removeClass('oldActive');

$('.sp').fadeOut();

$('.active').fadeIn();

});

$('#button-previous').click(function(){

$('.active').removeClass('active').addClass('oldActive');

if ( $('.oldActive').is(':first-child')) {

$('.sp').last().addClass('active');

}

else{

$('.oldActive').prev().addClass('active');

}

$('.oldActive').removeClass('oldActive');

$('.sp').fadeOut();

$('.active').fadeIn();

});

});

相关阅读:
Top