Question

我想在当前幻灯片的链接中添加一个类。我的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>

问题在于，当我点击特定链接时，当我点击幻灯片并且链接具有活动类时，否则当幻灯片循环时，他们相应的链接不具有活动类。任何人都可以给我代码，可以在幻灯片放映开始和我没有点击链接时添加/更改链接类。

Answer 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) + ')';
            }

});

Answer 2

我认为你应该在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");
            }
 });

在jquery循环插件中将类添加到活动幻灯片的链接

2 个答案: