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


Пользователь месяца
OlgaGetman OlgaGetman 1-й за Декабрь
Очков активности: 2100 10 тем, 170 сообщений, 7 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Ixman
    #1

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

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

    BLIK
    Очков активности: 165 0 тем, 22 сообщения, 5 баллов репутации

  • Фотография Андрей WPMasterKZ
    #3

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 153 Вне конкурса за определение пользователя месяца

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

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

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

    Cheaplinks (cheaplinks.pro)
    Очков активности: 63 0 тем, 21 сообщение, 2 балла репутации

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

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

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

    magnet (rbfxdirect.com)
    Очков активности: 58.5 0 тем, 13 сообщений, 3 балла репутации

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

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

  • Фотография Ilya74
    #9

    Ilya74
    Очков активности: 51 0 тем, 17 сообщений, 2 балла репутации

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

    r0mZet (rz-style.ru)
    Очков активности: 49.5 0 тем, 11 сообщений, 3 балла репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 25.12.2018
  • Яндекс выдача: 22.01.2019
Топ 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
  • Пользователь
  • 645 сообщений
  • Репутация: 190

Отправлено 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