Форум

imediasun1 · #1 (**permalink**) 15.08.2013, 15:18

Как выбрать первый блок, второй блок, третий блок среди блоков одного класса

imediasun1 · #2 (**permalink**) 15.08.2013, 15:28

Нужно что то вроде этого это слайдер

<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

ksa · #3 (**permalink**) 15.08.2013, 16:32

Сообщение от imediasun1

Как выбрать первый блок, второй блок, третий блок среди блоков одного класса

Как вариант...

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

ruslan_mart · #4 (**permalink**) 15.08.2013, 16:58

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', '');
}

Не проверял, но работать должно.

Форум

Справочник

Discord чат

Курсы javascript