0

我想向当前幻灯片的链接添加一个类。我的 JavaScript 代码是

$(document).ready (function() {
$('#slideshow').cycle({
            fx: 'fade',
            speed: 500,
            timeout: 1000,
            pause: 1,
            cleartype: true,
            cleartypeNoBg: true,
            pager: '#forpager',
            pagerAnchorBuilder: function(idx, slide) {
                return '#forpager li:eq(' + (idx) + ')';
            }
        });


    $('#forpager ul li a').click(function(){
      $('#forpager ul li a').removeClass("active");
      $(this).addClass("active");
    });


});

幻灯片的 html 代码是

<div id="forslideshow">
        <div id="slideshow">

            <div class="image">
            <center><img src="images/pic1.jpg" alt="Renny"/></center>
            </div>

            <div class="image">
            <center><img src="images/pic2.jpg" alt="Giselle"/></center>
            </div>

            <div class="image">
            <center><img src="images/pic3.jpg" alt="Emma Goldman"/></center>
            </div>

        </div>

        <div id="forpager">
        <ul>
            <li ><a  href="#"><img src="images/menupic.png"/></a></li>
            <li ><a  href="#"><img src="images/menupic.png"/></a></li>
            <li ><a href="#"><img src="images/menupic.png"/></a></li>
        </ul>
        </div>


    </div>

问题是，当我单击特定链接时，该代码会出现幻灯片并且链接具有活动类，但是当幻灯片循环时，它们相应的链接不是没有活动类。谁能给我代码，它可以在幻灯片放映开始时以及当我不点击链接时添加/更改链接类别。

4

2 回答 2

1

以下代码正在运行。但在应用循环之前使用 updateActivePagerLink 函数。 

$(document).ready (function() {

    $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {

                $(pager).find('li').removeClass('active')

                .filter('li:eq('+currSlideIndex+')').addClass('active');


    };



$('#slideshow').cycle({
            fx: 'fade',
            speed: 500,
            timeout: 1000,
            pause: 1,
            cleartype: true,
            cleartypeNoBg: true,
            pager: '#forpager',
        pagerAnchorBuilder: function(idx, slide) {
                return '#forpager li:eq(' + (idx) + ')';
            }

});
于 2012-07-01T13:00:55.870 回答
0

我认为你应该在这里使用“之后”选项http://jquery.malsup.com/cycle/options.html

$('#slideshow').cycle({
            fx: 'fade',
            speed: 500,
            timeout: 1000,
            pause: 1,
            cleartype: true,
            cleartypeNoBg: true,
            pager: '#forpager',
            pagerAnchorBuilder: function(idx, slide) {
                return '#forpager li:eq(' + (idx) + ')';
            },
            after: function() {
              $('#forpager ul li a').removeClass("active");
              $(this).addClass("active");
            }
 });
于 2012-07-01T10:54:54.340 回答