計算Div中的圖像

我遇到的問題是計算div中的圖像數量。計算Div中的圖像

例如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>

任何建議，將不勝感激。我也想知道我接近解決這個問題。謝謝。

來源

2012-10-11 LightM1

使用了'：first'，計數將始終爲0或1 –

@Kevin B，感謝您的回覆和信息 – LightM1

您可以直接使用計數作爲選擇器。 changes in jsfiddle

爲

var item = $(this).closest('.slideshow').attr('id'); 
     $('.' + item).html(currentNum + ' of ' + count);

我相信你想顯示在您的DIV計數id爲count。對於id，你應該使用＃而不是。（用於class selectopr）。

$('#count').html(currentNum + ' of ' + count);

修改後的代碼：

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

來源

2012-10-11 19:13:25 Anoop

@Shusl，謝謝你的回覆和例子我會做一些調整 – LightM1

@Shusl，我做了一些調整。它沒有工作。伯爵沒有出現。我嘗試將幻燈片和幻燈片從課程更改爲ID。然後所有4張圖像立即出現。當我再次上課時。它恢復正常。但是，在設置計數的事件中，計數不出現 – LightM1

。當你設置計數？ – Anoop

你似乎使用這種

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

因此計數永遠是如果它有它的圖像..

試試這個，而不是

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

而且這不作任何意義在當前背景下的功能.. 與$幻燈片更換它

來源

2012-10-11 19:16:08

@ Sushanth感謝您的答覆和例子，我會做一些調整。 – LightM1

@ LightM1 ..不客氣.. –

的語法必須是：

var count = $('div.myDiv').find('img').size();

所以你的情況它會是：

var count = $(this).closest('.slideshow').find('img').size();

來源

2012-10-11 19:18:52

感謝您的回覆和示例我會做一些調整 – LightM1

你可以試試這個：

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> 
...

而jQuery代碼：

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

見例如：jsfiddle

來源

2012-10-11 19:21:04 lolo

感謝您的答覆和示例。我會做一些調整 – LightM1

計算Div中的圖像

回答

相關問題