| |
|
|
| | Здравствуйте. Как при помощи jquery сделать слейдер div, такой что бы я в функцию передавал порядковый номер div'а а он до него скролировал показываемую область? | |
| |
|
|
| |
|
|
| |
для: p.pavluxa
(02.02.2013 в 21:23)
| | | Делаю так, но пашет не правильно:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
.scroll-slides {
width: 500px;
height: 500px;
margin: 0 auto;
overflow: hidden;
overflow-x: auto;
border: 1px solid red;
}
.scroll-slides ul.slides {
width: 2000px;
list-style: none;
margin: 0;
padding: 0;
}
.scroll-slides ul.slides li.slide {
float: left;
width: 500px;
height: 500px;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
$( function() {
$( '.scroll-slides' ).animate( { scrollLeft : $( '.slides li:eq(2)' ).offset().left+'px' }, 10000 );
} );
</script>
</head>
<body>
<div class="scroll-slides">
<ul class="slides">
<li class="slide">Мой первый блок</li>
<li class="slide">Мой второй блок</li>
<li class="slide">Мой третий блок</li>
<li class="slide">Мой четвертый блок</li>
</ul>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: p.pavluxa
(02.02.2013 в 21:40)
| | | Нарисуйте, или объясните четче, как должно быть правильно, и что не так? | |
| |
|
|
| |
|
|
| |
для: p.pavluxa
(02.02.2013 в 21:23)
| | | Делаю так, но пашет не правильно:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
.scroll-slides {
width: 500px;
height: 500px;
margin: 0 auto;
overflow: hidden;
overflow-x: auto;
border: 1px solid red;
}
.scroll-slides ul.slides {
width: 2000px;
list-style: none;
margin: 0;
padding: 0;
}
.scroll-slides ul.slides li.slide {
float: left;
width: 500px;
height: 500px;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
$( function() {
$( '.scroll-slides' ).animate( { scrollLeft : $( '.slides li:eq(2)' ).offset().left+'px' }, 10000 );
} );
</script>
</head>
<body>
<div class="scroll-slides">
<ul class="slides">
<li class="slide">Мой первый блок</li>
<li class="slide">Мой второй блок</li>
<li class="slide">Мой третий блок</li>
<li class="slide">Мой четвертый блок</li>
</ul>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: p.pavluxa
(02.02.2013 в 21:40)
| | | Работая с селекторами по классу элемента, всегда сужайте поиск - указывайте перед именем класса тег элемента, то есть не .scroll-slides, а div.scroll-slides.
Вы хотите прокрутить элемент на позицию дочернего элемента, а узнаете позицию элемента не относительно родительского элемента, а относительно страницы. Хотя в вашем случае и то, и другое вернет один и тот же результат, тем не менее это необходимо понимать, это и является причиной "не работает". | |
| |
|
|
| |
|
|
| |
для: confirm
(03.02.2013 в 06:53)
| | | Подправил. Но всё равно не работает (((
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
.scroll-slides {
width: 500px;
height: 500px;
margin: 0 auto;
overflow: hidden;
overflow-x: auto;
border: 1px solid red;
}
.scroll-slides ul.slides {
width: 2000px;
list-style: none;
margin: 0;
padding: 0;
}
.scroll-slides ul.slides li.slide {
float: left;
width: 500px;
height: 500px;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
$( function() {
$( 'div.scroll-slides' ).animate( { scrollLeft : $( 'ul.slides li:eq(2)' ).position().left+'px' }, 10000 );
} );
</script>
</head>
<body>
<div class="scroll-slides">
<ul class="slides">
<li class="slide">Мой первый блок</li>
<li class="slide">Мой второй блок</li>
<li class="slide">Мой третий блок</li>
<li class="slide">Мой четвертый блок</li>
</ul>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: p.pavluxa
(03.02.2013 в 10:07)
| | | Ничего вы не подправили и ничего не поняли из того, что я писал. Чтобы уяснить ситуацию, вместо анимации выведите на экран позицию div на странице и его дочерних элементов относительно родителя. Может тогда поймете в чем проблема.
При тех стилях, которые вы определили так поступать нет необходимости, все нужно решать другим способом. Но сперва разберитесь с причиной ошибки своей. | |
| |
|
|
| |
|
|
| |
для: confirm
(03.02.2013 в 10:13)
| | | >Но сперва разберитесь с причиной ошибки своей.
Напоминает мастера Йода =)))
"Восемь сотен лет джедаев учил я. Решать сам буду, кого в обучение брать."
=))) | |
| |
|
|
| |
|
|
| |
для: Sfinks
(03.02.2013 в 13:45)
| | | А что смешного? Не такая и сложная задача, чтобы самому понять, тем более это гораздо полезнее подсказки. | |
| |
|
|
| |
|
|
| |
для: confirm
(03.02.2013 в 14:05)
| | | Ну так идея в том что нужно от этой величины ещё отнимать позицию родителя! | |
| |
|
|
| |
|
|
| |
для: p.pavluxa
(03.02.2013 в 15:03)
| | | Это не идея, а необходимость, правда если так поступать. А вот поступать так не следует, и гораздо выгоднее, при указанных стилях, умножать ширину div на индекс элемента li, на который необходимо прокрутить. И указывать единицы измерения нет необходимости, по умолчанию это и есть пиксели. | |
| |
|
|
| |
|
|
| |
для: confirm
(03.02.2013 в 14:05)
| | | Фразы построение смешное. Да. =) | |
| |
|
|
