Jquery 对Div中的图像进行计数_Jquery_Css_Image

Jquery 对Div中的图像进行计数

jquery css image

Jquery 对Div中的图像进行计数,jquery,css,image,Jquery,Css,Image,我在计算分区中的图像数时遇到问题例如1/4、2/4、3/4、4/4 这就是我正在试图弄明白的小代码 //count image var currentNum = $(this).iniShow() + 1; var count = $(this).closest('.slideshow').find('img:first').length; var item = $(this).closest('.slideshow').attr('id'); $('.' + item ).ht

我在计算分区中的图像数时遇到问题

例如1/4、2/4、3/4、4/4

这就是我正在试图弄明白的小代码

//count image
var currentNum = $(this).iniShow() + 1;
var count = $(this).closest('.slideshow').find('img:first').length;
var item = $(this).closest('.slideshow').attr('id');
       $('.' + item ).html(currentNum + ' of ' + count);

以下是迄今为止我的html代码：

<!DOCTYPE html> 
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">   </script>
</head>
<style>
.slideshow img { display: none; cursor: pointer; }
</style>
<script type="text/javascript">
jQuery(function($){
//previous slide
$('.slideshow .prev').click(function() {
    prevSlide($(this).closest('.slideshow').find('.slides'));
});
//next slide
$('.slideshow .next, .slideshow img,').click(function() {
    nextSlide($(this).closest('.slideshow').find('.slides'));
});
//initialize show
iniShow();
function iniShow() {
    // show first slide with caption
    $('.slideshow').each(function() {
        showSlide($(this).find('.slides'));
    });
}
// move previous slide 
function prevSlide($slides) {
    $slides.find('img:last').prependTo($slides);
    showSlide($slides);
}
// move next slide 
function nextSlide($slides) {
    $slides.find('img:first').appendTo($slides);
    showSlide($slides);
}
// show slide with caption
function showSlide($slides) {
    var $nextSlide = $slides.find('img:first');
    //hide (reset) all slides
    $slides.find('img').hide();
    //fade in next slide
    $nextSlide.fadeIn(500);
    //show caption
    $('#caption').text($nextSlide[0].alt);
    //count image
    var currentNum = $(this).iniShow() + 1;
    var count = $(this).closest('.slideshow').find('img').length;
    $('#count').html(currentNum + ' of ' + count);
    }
});
</script>
<body>
<div class="slideshow">
<div class="slides">
    <img src="image/1a.jpg" width="500" height="500" alt="Caption 1 Image is ..." />
    <img src="image/2a.jpg" width="500" height="500" alt="Caption 2 Image is ..." />
    <img src="image/3a.jpg" width="500" height="500" alt="Caption 3 Image is ..." />
    <img src="image/4a.jpg" width="500" height="500" alt="Caption 4 Image is ..." />
</div>
<p id="caption"></p> / <p id="count"></p>
<div class="controls">
<a class="prev" href="javascript:void(0);">Previous</a> -
<a class="next" href="javascript:void(0);">Next</a>
</div>
</div>
</body>
</html>


.slideshow img{显示：无；光标：指针；}
jQuery（函数（$）{
//上一张幻灯片
$（'.slideshow.prev'）。单击（函数（）{
prevside（$（this）.closest（'.slideshow'）。find（'.slides'）；
});
//下一张幻灯片
$（'.slideshow.next，.slideshow img'）。单击（函数（）{
nextSlide（$（this）.closest（'.slideshow'）.find（'.slides'））；
});
//初始化显示
iniShow（）；
函数iniShow（）{
//显示带有标题的第一张幻灯片
$（'.slideshow'）。每个（函数（）{
showSlide（$（this.find（'.slides'））；
});
}
//移动上一张幻灯片
功能幻灯片（$slides）{
$slides.find（'img:last'）。prependTo（$slides）；
放映幻灯片（$幻灯片）；
}
//移动下一张幻灯片
函数nextSlide（$slides）{
$slides.find（'img:first'）。appendTo（$slides）；
放映幻灯片（$幻灯片）；
}
//放映带标题的幻灯片
功能演示幻灯片（$slides）{
var$nextSlide=$slides.find（'img:first'）；
//隐藏（重置）所有幻灯片
$slides.find（'img'）.hide（）；
//淡入下一张幻灯片
$nextSlide.fadeIn（500）；
//显示标题
$（'#caption'）.text（$nextSlide[0].alt）；
//计数图像
var currentNum=$（this.ini显示（）+1；
var count=$（this）.closest（'.slideshow'）.find（'img'）.length；
$（'#count'）.html（currentNum+'of'+count）；
}
});
/
-

如有任何建议，将不胜感激。我还想知道我是否接近解决这个问题。谢谢。

您可以直接使用计数作为选择器

为了

我相信您希望使用id

count

在div中显示您的计数。对于id，您应该使用#而不是（用于类selectopr）

修改代码：

var currentNum = $(this).iniShow() + 1;
var count = $(this).closest('.slideshow').find('img').length;
       $('#count').html(currentNum + ' of ' + count);

您可以直接使用计数作为选择器

为了

我相信您希望使用id

count

在div中显示您的计数。对于id，您应该使用#而不是（用于类selectopr）

修改代码：

var currentNum = $(this).iniShow() + 1;
var count = $(this).closest('.slideshow').find('img').length;
       $('#count').html(currentNum + ' of ' + count);

你好像在用这个

.find('img:first').length;

因此，如果其中包含图像，则计数将始终为1

试试这个

var count = $slides.closest('.slideshow').find('img').length;

另外，这在当前函数上下文中没有任何意义。。
将其替换为$slides
您似乎正在使用此

.find('img:first').length;
因此，如果其中包含图像，则计数将始终为1
试试这个

var count = $slides.closest('.slideshow').find('img').length;
另外，这在当前函数上下文中没有任何意义。。将其替换为$slides
语法必须为：

var count = $('div.myDiv').find('img').size();
因此，在您的情况下，它将是：

var count = $(this).closest('.slideshow').find('img').size();
语法必须是：

var count = $('div.myDiv').find('img').size();
因此，在您的情况下，它将是：

var count = $(this).closest('.slideshow').find('img').size();
您可以尝试以下方法：

var count = $(".slides > img").size();

在您的情况下，最好使用
id
而不是
class
。因此，您的
div
将如下所示：

<div id="slides"> <img src="image/1a.jpg" width="500" height="500" alt="Caption 1 Image is ..." /> <img src="image/2a.jpg" width="500" height="500" alt="Caption 2 Image is ..." /> <img src="image/3a.jpg" width="500" height="500" alt="Caption 3 Image is ..." /> <img src="image/4a.jpg" width="500" height="500" alt="Caption 4 Image is ..." /> </div> ...
参见示例：
您可以尝试以下方法：

var count = $(".slides > img").size();

在您的情况下，最好使用
id
而不是
class
。因此，您的
div
将如下所示：

<div id="slides"> <img src="image/1a.jpg" width="500" height="500" alt="Caption 1 Image is ..." /> <img src="image/2a.jpg" width="500" height="500" alt="Caption 2 Image is ..." /> <img src="image/3a.jpg" width="500" height="500" alt="Caption 3 Image is ..." /> <img src="image/4a.jpg" width="500" height="500" alt="Caption 4 Image is ..." /> </div> ...

请参见示例：
您正在使用的
：首先，计数将始终为0或1@KevinB，感谢您的回复和信息您正在使用的：首先，计数将始终为0或1@Kevin谢谢你的回复和信息谢谢你的回复和例子。我将对回复和示例进行一些调整。我会做一些调整@Sushanth谢谢你的回复和示例，我会做一些调整。@Sushanth谢谢你的回复和示例，我会做一些调整。@Shusl，谢谢你的回复和示例，我会做一些调整。@Shusl，谢谢你的回复和示例adjustments@Shusl，我做了一些调整。它不起作用。伯爵没有出现。我尝试将幻灯片放映和幻灯片从类更改为id。然后所有4幅图像同时显示。当我再次上课的时候。它恢复了正常。但伯爵没有appear@LightM1我知道你用的是iniShow方法，但不存在，因此进一步停止exection@LightM1我在JSFIDLE中做了一些更改，它现在正在工作。但有一个问题，因为你是洗牌的图像很难找到图像的索引，所以它总是显示为4的1。是否有任何图像索引信息意味着您是否存储了有关图像初始位置的信息？@LightM1我在html中进行了更改，请参阅。我向所有图像添加了索引属性，并使用它来显示计数信息。对于JSFIDLE，您可以编辑，然后单击“运行”查看更改。@Shusl，谢谢您的回复和示例，我将做一些修改adjustments@Shusl，我做了一些调整。它不起作用。伯爵没有出现。我尝试将幻灯片放映和幻灯片从类更改为id。然后所有4幅图像同时显示。当我再次上课的时候。它恢复了正常。但伯爵没有appear@LightM1我知道你用的是iniShow方法，但不存在，因此进一步停止exection@LightM1我在JSFIDLE中做了一些更改，它现在正在工作。但有一个问题，因为你是洗牌的图像很难找到图像的索引，所以它总是显示为4的1。是否有任何图像索引信息意味着您是否存储了有关图像初始位置的信息？@LightM1我在html中进行了更改，请参阅。我向所有图像添加了索引属性，并使用它来显示计数信息。对于JSFIDLE，您可以编辑，然后单击“运行”查看更改。感谢回复和示例，我将进行一些调整感谢回复和示例，我将进行一些调整