Перейти к содержимому


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография yuran
    #1

    yuran (yurbol.ru)
    Очков активности: 79.5 0 тем, 53 сообщения, 1 балл репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 58.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #3

    BLIK
    Очков активности: 48 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #4

    Mandarin
    Очков активности: 42 0 тем, 28 сообщений, 1 балл репутации

  • Фотография WGN
    #5

    WGN (worldgamenews.com)
    Очков активности: 39 Вне конкурса за определение пользователя месяца

  • Фотография Ixman
    #6

    Ixman (o5cat.ru)
    Очков активности: 36 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 30 2 темы, 14 сообщений, 1 балл репутации

  • Фотография Mariko
    #8

    Mariko
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

  • Фотография алексс
    #9

    алексс
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Фотография RosenRot
    #10

    RosenRot (abuzov.com)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 13.11.2018
Топ 5 участников по репутации


Помогите доработать слайдер!

#1 Kdes70

Kdes70
  • Неактивные
  • 55 сообщений
  • Репутация: 0
0

Отправлено 20 May 2012 - 13:41

Здравствуйте нашел вот такой Слайдер все в нем устраивает но вот есть один минус, помогите сделать чтобы блоки зацикливались то есть сделать карусель, а то они прокручиваются в одну сторону до ходят до конечного блока потом приходятся в ручную прокручивать обратно или перегружать страницу.
Заранее благодарю за любую оказанную помощь))))

PHP
<div id="slaider">
	<div id="slaiderTop"></div>
		<div id="slContent">
  <?
$resultStat = mysql_query ("SELECT * FROM data WHERE stat = 1 ORDER BY id DESC LIMIT 10",$db);
if (!$resultStat)
{
echo "<p>В данной категории объявлений не найдено</p>";
exit(mysql_error());
}
  if (mysql_num_rows($resultStat) > 0)
{
$myrowStat = mysql_fetch_array ($resultStat);
}
else
{
  echo "<p>Информация п запросу не может быть извлечена в таблице нет записей.</p>";
  exit();
}
do
{
printf("
	<div class='slide'>
	<img id='sl_img' src=../files/%s>
   <div class='sltitle'><a href='view_post.php?id=%s'>%s<a/></div>
	</div>",$myrowStat["filname"],$myrowStat["id"],$myrowStat["title"]);
	}
	while ($myrowStat = mysql_fetch_array ($resultStat));
?>  

Js

<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 176;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // Убираем прокрутку
  $('#slContent').css('overflow', 'hidden');
  // Вставляем все .slides в блок #slideInner
  slides
  .wrapAll('<div id="slideInner"></div>')
  // Float left отображать по горизонтали, скорректировать .slides width
  .css({
	'float' : 'left',
	'width' : slideWidth
  });
  // Устанавливаем ширину #slideInner, равную ширине всех слайдов
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  // Вставляем элементы контроля в DOM
  $('#slaider')
	.prepend('<span class="control" id="leftControl">Move left</span>')
	.append('<span class="control" id="rightControl">Move right</span>');
  // Прячем правую стрелку при загрузке скрипта
  manageControls(currentPosition);
  // Отлавливаем клик на класс .controls
  $('.control')
	.bind('click', function(){
	// Определение новой позиции
	  currentPosition = ($(this).attr('id')=='rightControl')
	? currentPosition+1 : currentPosition-1;
	  // Прячет / показывает элементы контроля
	  manageControls(currentPosition);
	  // Move slideInner using margin-left
	  $('#slideInner').animate({
		'marginLeft' : slideWidth*(-currentPosition)
	  });
	});
  // manageControls: показывает или скрывает стрелки в зависимости от значения currentPosition
  function manageControls(position){
	// Спрятать левую стрелку, если это левый слайд
	if(position==0){ $('#leftControl').hide() }
	else{ $('#leftControl').show() }
	// Спрятать правую стрелку, если это последний слайд
	if(position==numberOfSlides-1){ $('#rightControl').hide() }
	else{ $('#rightControl').show() }
	}
  });
</script>

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 20 May 2012 - 17:37

Kdes70, можно сделать примерно так:
после строки
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
добавить
if (currentPosition == numberOfSlides) currentPosition = 0;
if (currentPosition == -1) currentPosition = numberOfSlides-1;
и убрать везде вызовы функции
manageControls(currentPosition);

Да и описание функции manageControls() тоже можно убрать, потому что она как раз нужна, чтобы останавливаться в конце и в начале списка слайдов.
  • 1

#3 Kdes70

Kdes70
    Topic Starter
  • Неактивные
  • 55 сообщений
  • Репутация: 0

Отправлено 21 May 2012 - 13:33

спасибо!!! еще вопрос а как сделать чтобы при наведении мыши на стрелку слайды прокручивались?))
  • 0

#4 c0ns0l3

c0ns0l3
  • Неактивные
  • 264 сообщений
  • Репутация: 49

Отправлено 21 May 2012 - 20:18

добавить тригер mouseenter или hover.

.bind('click mouseenter', function(){})
к той же анонимной ф-ции
  • 0

#5 Kdes70

Kdes70
    Topic Starter
  • Неактивные
  • 55 сообщений
  • Репутация: 0

Отправлено 25 May 2012 - 14:32

способа большей!!!!!
  • 0



Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru