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


fozzy

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

#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

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Помогите установить слайдер!(
  2. Протестировать доску объявлений на wordpress
  3. Помогите сделать фотогалерею на сайте DLE
  4. Ребят, помогите доделать слайдер.
  5. Как сделать чтобы работали два слайдера на одной странице независимо

#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