Question

我正在尝试创建一个手动图像幻灯片，其中从PHP脚本返回新的图像链接。我有一个问题，即每个动态添加的html标记都没有关注我为其分配的类的javascript。

我在回显php中的html与默认情况下的背景颜色相同。但是，图像首先堆叠在一起，当点击下一个图像时，它们全部消失，而不是更改＆＃34;活动＆＃34;之一。

我缺少什么让这项工作？

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>

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

}）;

带有动态更改html图像的Javascript幻灯片

0 个答案: