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 に答える