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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

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

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

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

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

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

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

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

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

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

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография Napoleon-007
    #7

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

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

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

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

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

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

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 15.08.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

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. 2 слайдера на одной странице
  2. Не работает слайдер на одной странице
  3. Выполняю различные действия с изображениями (также делаю слайд-шоу)
  4. Как сделать чтобы работали два слайдера на одной странице независимо
  5. Пожелания и предложения по форуму

#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