当前位置: 动力学知识库 > 问答 > 编程问答 >

php - Javascript slideshow with dynamically changing html images

问题描述:

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();

});

});

分享给朋友:
您可能感兴趣的文章:
随机阅读: