выбор первого блока определенного класса
Как выбрать первый блок, второй блок, третий блок среди блоков одного класса
|
Нужно что то вроде этого это слайдер
<div class="slider_img"> <img src="/uploads/usertemplates/slider1.png"> </div> <div class="slider_img"> <img src="/uploads/usertemplates/slider2.png"> </div> <div class="slider_img"> <img src="/uploads/usertemplates/slider3.png" > </div>
<script>
$('.slider_img:2').css('display','none');
$('.slider_img:3').css('display','none');
$('#arrow_right').click(function(){
$('.slider_img:видимый)').css('display','none');
$('.slider_img:next').css('display','block');
});
</script>
как правильно это оформить в jquery |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
var o=$('.test');
alert(o.eq(0).text());
alert(o.eq(1).text());
alert(o.eq(2).text());
});
</script>
</head>
<body>
<div class='test'>1</div>
<div class='test'>2</div>
<div class='test'>3</div>
</body>
</html>
|
CSS:
.slider_img img {
display: none;
}
HTML: <div class="slider_img"> <img src="/uploads/usertemplates/slider1.png"> <img src="/uploads/usertemplates/slider2.png"> <img src="/uploads/usertemplates/slider3.png"> </div> <input type="button" onclick="slider(false)" value="Prev" /> <input type="button" onclick="slider(true)" value="Next" /> JS:
var sliderIndex = -1, imgs = $('.slider_img img');
function slider(a) {
sliderIndex += a ? 1 : -1;
if(!imgs[sliderIndex]) sliderIndex = a ? 0 : imgs.length -1;
imgs.css('display', 'none');
imgs.eq(sliderIndex).css('display', '');
}
Не проверял, но работать должно. |
| Часовой пояс GMT +3, время: 22:17. |