[英]Slideshow with next/back arrows, caption… but unable to add a counter
I'm making a slideshow using JQuery Cycle with arrows (done), caption (done), but I can't make the counter. 我正在使用带有箭头(完成),标题(完成)的JQuery Cycle进行幻灯片显示,但是我无法进行计数。 I'm basing my slideshow on this example: http://www.morganstudio.co.uk/ (in this one the counter works but there is no slideshow, which I have)
我将幻灯片放映基于此示例: http : //www.morganstudio.co.uk/ (在此示例中,计数器起作用,但是没有幻灯片放映)
HTML: 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: 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>');
}
});
Try to change your JavaScript to the following, where i added another callback. 尝试将您的JavaScript更改为以下代码,在其中添加了另一个回调。
(disclaimer, not tested). (免责声明,未经测试)。
$(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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.