2014-01-19 2 views
2

У меня простая проблема, я не могу найти выход. Im делает небольшой, простой слайдер/галерею 1) «Если нажать кнопку 1, появится одно изображение« 2) «Если я нажму кнопку 2, IMAGE 1, сдвиньте влево, а IMAGE 2 затухает в« 3) «Если Я нажимаю на любое изображение, например, ИЗОБРАЖЕНИЕ 3, текущий слайд изображения слева, новый исчезает в «JQuery получить идентификатор элемента изображения из группы изображений в div

Моя единственная проблема заключается в том, как получить идентификатор видимого изображения, которое уже отображается. так что я могу сдвинуть его и исчезать на изображении по нажатой кнопке.

Все изображения по умолчанию «css« display none »и находятся в разделе« .slider ».

<body> 
<div class = "slider"> 
    <img id="1" src = "img/img1.jpg" class = "pic" border = "0" /> 
    <img id="2" src = "img/img2.jpg" class = "pic" border = "0" /> 
    <img id="3" src = "img/img3.jpg" class = "pic" border = "0" /> 
</div> 

<button type="button" class="btn" id="btn1">Btn 1</button> 
<button type="button" class="btn" id="btn2">Btn 2</button> 
<button type="button" class="btn" id="btn3">Btn 3</button> 
</body> 



<style type = "text/css"> 

.slider{ 
width:400px; 
height:200px; 
overflow:hidden; 
margin:30px auto; 
} 
.slider img{ 
width:400px; 
height:200px; 
    display:none; 
} 
</style>  

<script> 
$(document).ready(function(){ 

    $(".btn").click(function() { 
        //alert($(".slider").children('.pic').attr('id')); 
        // or using (":visible:); 
      )}; 
)}; 
</script> 

ответ

1

Вы можете использовать :visible selector, чтобы получить видимое изображение

var $imgvisible = $('.slider img:visible'); 
alert($imgvisible.attr('id')) 

Но при загрузке страницы не будет ничего возвращать, потому что нет никаких видимых изображений

Demo: Fiddle

+0

Огромное вам спасибо, это было именно то, что я искал. –

+0

@ArunPJohny: всегда приятно смотреть ваш ответ с критической информацией .. + 1 !! : D – NoobEditor

Смежные вопросы