Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как зациклить прокрутку? / 9 сообщений из 9, страница 1 из 1
23.01.2013, 05:10
    #38120669
amster13
amster13
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как зациклить прокрутку?
вот простейший слайдер без анимации. никак не дойду, как сделать прокрутку по кругу если неизвестно количество изображений - может быть 4, может быть 9 или 12?
Код: html
1.
2.
3.
4.
5.
<div class="view-big-image">
    <div class="field-item field-item-0"><img src="skidka0.jpg" /></div>
    <div class="field-item field-item-1"><img src="skidka1.jpg" /></div>
     ...
</div>


Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
(function($){
$('.view-big-image').append('<div class="left_now"></div><div class="right_now"></div>');
$('.view-big-image .field-item-0').addClass('active');

$('.right_now').click(function(){
$('.view-big-image .field-item.active').next().filter(function(){
$(this).addClass('active').show();
$(this).prev().removeClass('active').hide(); 
});
});

$('.left_now').click(function(){
$('.view-big-image .field-item.active').prev().filter(function(){
$(this).addClass('active').show();
$(this).next().removeClass('active').hide(); 
});
});
})(jQuery)



может кто подскажет?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2013, 08:50
    #38120725
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как зациклить прокрутку?
amster13никак не дойду, как сделать прокрутку по кругу если неизвестно количество изображений
Просто вставляй первый элемент в самый конец контейнера + анимация...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2013, 09:05
    #38120743
amster13
amster13
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как зациклить прокрутку?
че-то не совсем... подробнее можешь пояснить?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2013, 10:14
    #38120817
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как зациклить прокрутку?
amster13подробнее можешь пояснить?
А пример тестовый по-лучше можешь сделать?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2013, 19:15
    #38122140
amster13
amster13
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как зациклить прокрутку?
он так и выглядит, почти. в скрипте есть еще пара строчек - под слайдером расположены уменьшенные картинки small-image - при клике должны выводиться в слайдер. полный код
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
(function($){
$('.view-big-image').append('<div class="left_now"></div><div class="right_now"></div>');
$('.view-big-image .field-item-0').addClass('active');

$('.right_now').click(function(){

$('.view-big-image .field-item.active').next().filter(function(){
$(this).addClass('active').show();
$(this).prev().removeClass('active').hide(); 
});
});

$('.left_now').click(function(){

$('.view-big-image .field-item.active').prev().filter(function(){
$(this).addClass('active').show();
$(this).next().removeClass('active').hide(); 

});
});
$('.view-small-image .field-item').click(function(){

id = $(this).attr('class').split('-');
id = id[3];

$('.view-big-image .field-item').hide().removeClass('active');
$('.view-big-image .field-item-'+id).show().addClass('active');

$('html,body').animate({
scrollTop: 380,
},400);
});
})(jQuery)


и как тут сделать, чтоб не останавливаться на 4-ой(6ой, 10й) картинке, или если листать назад-на первой?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2013, 22:31
    #38122338
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как зациклить прокрутку?
amster13 , это и есть тестовый пример?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2013, 23:51
    #38122439
amster13
amster13
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как зациклить прокрутку?
а что не так?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.01.2013, 23:52
    #38122441
amster13
amster13
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как зациклить прокрутку?
http://make4planet.x10.mx/sl/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.01.2013, 08:56
    #38122667
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
как зациклить прокрутку?
amster13а что не так?
Вот так должен выглядеть тестовый пример.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
<!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">
* {
	margin: 0;
	padding: 0;
}
div {
	width: 222px;
	height: 54px;
	padding: 5px;
	margin: 10px;
	border: 1px solid;
	overflow: hidden;
}
ul {
	width: 1000px;
	list-style: none;
	overflow: hidden;
}
li {
	float: left;
	width: 50px;
	height: 50px;
	border: 1px solid;
}
li + li {
	margin-left: 5px;
}
</style>
<script type="text/javascript">
function rotate() {
	var oc=document.getElementById('scr');
	var o=oc.getElementsByTagName('li')[0];
	oc.appendChild(o);
};
</script>
</head>
<body onload='setInterval(rotate,500);'>
<div>
	<ul id='scr'>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
	</ul>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / как зациклить прокрутку? / 9 сообщений из 9, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 443ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448821]:
 0ms
get settings:
 7ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 166ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 30ms
get tp. blocked users:
 1ms
others: 215ms
total:  443ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]