Question

我正在使用箭头（完成），标题（完成）使用JQuery Cycle制作幻灯片，但我无法制作计数器。我基于此示例制作幻灯片： http://www.morganstudio.co.uk/（在这一个计数器有效，但没有幻灯片，我有）

HTML：

<div id=“slideshow”>
    <img  class="slide" src="images/one.jpg"    alt=“one”   name="http://pageone.com"/>
    <img  class="slide" src="images/two.jpg"    alt=“two”   name="http://pagetwo.com"/>
    <img  class="slide" src="images/three.jpg"  alt=“three”   name="http://pagethree.com"/>
</div>
<div id=“navigator”>
    <a id="prev" href=""><div id="navPhotos"></div></a>
    <a id="next" href=""><div id="navPhotos2"></div></a>
</div>
<div id="description"></div>
<div id=“counter”></div>

JAVASCRIPT：

$(document).ready(function() {
        $(‘#slideshow’).cycle({
        fx:'fade',
        speed: 300,
        timeout:4000,
        next: '#next',
        prev: '#prev',
        before: onBefore,
});
function onBefore() {
    $('#description p').fadeIn('1000');
        $('#description').html('<p>' + '<a href="' + this.name + '">' + this.alt + '</a>' + '</p>');
    }
});

Answer 1

尝试将您的JavaScript更改为以下内容，我添加了另一个回调。

（免责声明，未经测试）。

$(document).ready(function() {
    $(‘#slideshow’).cycle({
    fx:'fade',
    speed: 300,
    timeout:4000,
    next: '#next',
    prev: '#prev',
    before: onBefore,
    after: onAfter
});
function onBefore() {
    $('#description p').fadeIn('1000');
        $('#description').html('<p>' + '<a href="' + this.name + '">' + this.alt + '</a>' + '</p>');
    }
};

function onAfter(curr,next,opts) {
    var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
    $('#caption').html(caption);
}

带有下/后箭头的幻灯片，标题......但无法添加计数器

1 个答案: