向 jQuery 幻灯片添加计数器
adding counter to a jquery slideshow
我正在使用我用Javascript为我的网站构建的幻灯片。我想添加一个计数器。
1 的 3...
幻灯片 1/总幻灯片...
我无法找到解决方案...
这是我的代码:
$(document).ready(function() {
// set display:none for all members of ".pic" class except the first
$('.image_news:gt(0)').hide();
// stores all matches for class="pic"
var $slides = $('.image_news');
$slides.click(function(){
// stores the currently-visible slide
var $current = $(this);
if( $current.is($slides.last()) ) {
$current.hide();
$slides.first().show();
}
// else, hide current slide and show the next one
else {
$current.hide().next().show();
}
});
});
以及带有示例的 fsfiddle 链接:http://jsfiddle.net/XRpeA/3/
非常感谢您的帮助!
写这个:
var count = $('.image_news').length; //length gives total length of elements
$("#total").text(count);
if ($current.is($slides.last())) {
$("#current").text("1");//first slide
$current.hide();
$slides.first().show();
}
// else, hide current slide and show the next one
else {
$("#current").text($current.next().index()+1);
//index() returns index, add 1 because it starts from 0
$current.hide().next().show();
}
在这里摆弄。
只需添加一个计数器并更改 html。这是一个小提琴。
var counter = 1;
$("#counter").html("image "+counter+"/3");
$slides.click(function(){
// stores the currently-visible slide
var $current = $(this);
if( $current.is($slides.last()) ) {
$current.hide();
$slides.first().show();
counter = 1;
$("#counter").html("image "+counter+"/3");
}
// else, hide current slide and show the next one
else {
counter++;
$current.hide().next().show();
$("#counter").html("image "+counter+"/3");
}
});
非常感谢。我将使用第一个选项,@Hiral。我的网站上还有另一个幻灯片,当尝试其他选项时,它无法正常工作......但是非常感谢大家!
我还有另一件事要解决。 当我的页面上有 2 或 3 个幻灯片时,它不起作用......我在管理页面中使用了中继器自定义字段,因此我无法提前知道我需要多少幻灯片......有谁知道我该如何解决它?这是一个JSFIDDLE: http://jsfiddle.net/XRpeA/13/
<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>
<br><br>
<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>
多谢
给每个图像一个 id,例如:1,2,3,并在您在该图像上时显示该 id。
另一种选择
// stores the currently-visible slide
var $current = $(this);
$current.hide();
if( $current.is($slides.last()) )
{
$current = $slides.first();
}
// else, hide current slide and show the next one
else
{
$current = $current.next();
}
$current.show();
$('#counter').text('image ' + ($slides.index($current) + 1) + ' / ' + $slides.length);
多种选择可供选择
相关文章:
- 为计数器添加滑动效果
- 动态添加行时计数器的增量
- 添加一个接触计数器敲除
- 如何在Javascript中添加基于计数器的勾号
- 向上一个/下一个图像幻灯片添加计数器(仅限javascript/css)
- 将年份计数器添加到flipclock.js中
- 如何向此 JavaScript 反向倒计时计时器计数器添加毫秒
- 向 jQuery 幻灯片添加计数器
- 将 AJAX 添加到带计数器的轨道 4 喜欢/不喜欢按钮
- 向数字计数器添加逗号
- 将 JavaScript 计数器添加到我的图像中
- 向计数器添加毫秒数
- 向 jquery 同位素添加一个计数器
- 向 jQuery 计数器添加千位分隔符
- 添加增量到(数字,时间,速度)到计数器
- 向 Angular ng-repeat(角度)添加一个计数器
- 如何使用计数器添加动态字段以限制jQuery中的字段数
- 如何添加一个计数器来显示找到的文本匹配数
- 向jquery计数器添加整数
- 将计数器添加到javascript函数循环中