Question

我的网站上有一张幻灯片，上面有10张幻灯片和一张幻灯片。幻灯片下方的10个相应标题＆amp;下一个按钮和上一个按钮。单击下一个按钮时，幻灯片将循环播放10张幻灯片，然后变为空白。任何人都可以帮我解决这个问题。谢谢，罗恩

这是html：

<body style="font-family: Arial, Sans-serif, sans;">

<!-- this will work with any number of images -->
<!-- set the active class on whichever image you want to show up as the default 
(otherwise this will be the last image) -->

<h2>Top 10 Vechicles Among US-Hispanics</h2><br />


<div id="slideshow">
    <div class="active">
        <img src="img/banner01.jpg" alt="Toyota Corolla" /></a>
        <br><strong>1. Toyota Corolla</strong><br>
The 2013 Toyota Corolla is a study in practicality and stylish engineering.
    </div>

    <div>
        <img src="img/banner02.jpg" alt="Honda Civic" /></a>
        <br><strong>2. Honda Civic</strong><br>
The Honda Civic, a longtime favorite sedan among fuel-conscious drivers.
    </div>

    <div>
        <img src="img/banner03.jpg" alt="Honda Accord" /></a>
        <br /><strong>3. Honda Accord</strong><br>
The 2013 Honda Accord proved to be popular with drivers and professional reviewers.
    </div>

    <div>
        <img src="img/banner04.jpg" alt="Toyota Camry" /></a>
        <br /><strong>4. Toyota Camry</strong><br>

The Toyota Camry is one of the best-selling vehicles of all time.
    </div>
     <div>
        <img src="img/banner05.jpg" alt="Ford F-Series" /></a>
        <br /><strong>5. Ford F-Series</strong><br>
The Ford F-Series of pickups has put a huge fleet of tough trucks.
    </div>
     <div>
        <img src="img/banner06.jpg" alt="Nissan Sentra" /></a>
        <br /><strong>6. Nissan Sentra</strong><br>
The 2013 Nissan Sentra drives up in six models, from the basic S.
    </div>
     <div>
        <img src="img/banner07.jpg" alt="Nissan Altima" /></a>
        <br /><strong>7. Nissan Altima</strong><br>
The midsize Nissan Altima was completely made over for the 2013 model.
    </div>
     <div>
        <img src="img/banner08.jpg" alt="Chevrolet Silverado" /></a>
        <br /><strong>8. Chevrolet Silverado</strong><br>
The 2013 Chevy Silverado, with a starting price of $23,590 for the two-wheel-drive 1500 model.
    </div>
     <div>
        <img src="img/banner09.jpg" alt="Honda CR-V" /></a>
        <br /><strong>9. Honda CR-V</strong><br>
With its tight turning radius, carlike handling and roomy interior.
    </div>
     <div>
        <img src="img/banner10.jpg" alt="Nissan Versa" /></a>
        <br /><strong>10. Nissan Versa</strong><br>
The 2013 Nissan Versa scores big points for its affordability.
    </div>

</div>


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

这是J代码：

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">

/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/



$(document).ready(function(){
$('.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();
    });




});

</script>

这是css代码：

<style type="text/css">

/*** set the width and height to match your images **/

#slideshow {
    position:relative;
    height:560px;
    width:620px;
}

#slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 560px;
    width:620px;
    background-color: #FFF;
}

#slideshow DIV.active {
    z-index:10;
    opacity:1.0;
}

#slideshow DIV.last-active {
    z-index:9;
}

#slideshow DIV IMG {
    height: 350px;
    display: block;
    border: 0;
    margin-bottom: 10px;
}

#nav {margin-top:20px; width:100%;}
#button-previous {float:left;margin-left:200px;}
#button-next {float:right;margin-right:200px;}


</style>

Answer 1

您的代码依赖于sp类来正常运行。

您需要将sp类添加到每个幻灯片div中，如下所示：

<div class="sp">
   <img src="img/banner01.jpg" alt="Toyota Corolla" /></a>
    <br><strong>1. Toyota Corolla</strong><br>
    The 2013 Toyota Corolla is a study in practicality and stylish engineering.
</div>

没有它，代码就无法找到第一个或最后一个元素。

jquery幻灯片不会循环多次

1 个答案: