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

Сервис обмена электронных валют


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

#1 Kdes70

Kdes70
  • Пользователь
  • 55 сообщений
  • Репутация: 0
0

Отправлено 20 Май 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
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 20 Май 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 Май 2012 - 13:33

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

#4 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49

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

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

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

#5 Kdes70

Kdes70
    Topic Starter
  • Пользователь
  • 55 сообщений
  • Репутация: 0

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

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


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