Слайд шоу на библиотеке jQuery

[IgorArhangel]

Добрый день!
Стала задача разработать слайд шоу


Есть похожий на этом сайте но проблема в том что не получается активной картинке присвоить ссылку.

Как это сделать примерно в какую сторону копать. Целые день сидел но ничегою

[tsigel]

Если слайд шоу со стрелочками (как на сайте-примере), то все просто.

Картинки размещаете со свойствами position: absolute, так чтобы они были одна за другой.
Стрелочкам присваиваете классы prev и next (например) и по клику на стрелочку запускаете событие перемещения.

$(function() { // Эта функция выполнится при полной загрузке страницы
  var prev = $('.prev'),
  next = $('.next'); // Объявили переменные

  prev.click(function() {//клик на стрелку назад
    $('./*общий класс всех картинок*/').each(function() {//цикл по всем картинкам
       $(this).animate({'left' : '-=' + $(this).width() + 'px'}, 'slow') /*вычитаем из значения left текущей картинки её ширину*/
    })
  })
})

Пишите кнопку "вперед". Также после создания анимации будет необходимо придумать условие прекращения анимаций по достижению крайней картинки.

Так же обратите внимание, что данный скрипт рассчитан что все картинки будут иметь одинаковую ширину.

Разбирайтесь, пишите вопросы.

[tsigel]

Учите обращение к селекторам, и анимации (т.е. эффекты jQuery типа animate, fade, slide...), по сути это минимум что необходимо знать. Пример приведенный выше - самый простой и понятный, освойте хотябы его, а потом можно будет переделывать на слайд шоу с вашей картинки.

[IgorArhangel]

Кое что сделал. Но все же работает еще не так...
Загвоздка именно на javascript
вот собственно он

(function ($) {
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = true;
$(document).ready(function(e) {
	//$('.slide').css(
	//	{"left": '0'}).hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = $("#slider .slide").size();
	var animSlide = function(arrow){
		clearTimeout(slideTime);
		$('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
		if(arrow == "next"){
			if(slideNum == (slideCount-1)){slideNum=0;}
			else{slideNum++}
			}
		else if(arrow == "prew")
		{
			if(slideNum == 0){slideNum=slideCount-1;}
			else{slideNum-=1}
		}
		else{
			slideNum = arrow;
			}
		$('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
		$(".control-slide.active").removeClass("active");
		$('.control-slide').eq(slideNum).addClass('active');
		}

	var $adderSpan = '';
	$('.slide').each(function(index) {
			$adderSpan += '<span class = "control-slide">' + index + '</span>';
		});
	$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
	$(".control-slide:first").addClass("active");
	$('.control-slide').click(function(){
	var goToNum = parseFloat($(this).text());
	animSlide(goToNum);
	});
	var pause = false;
	var rotator = function(){
			if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
			}
	$('#slider-wrap').hover(	
		function(){clearTimeout(slideTime); pause = true;},
		function(){pause = false; rotator();
		});
	rotator();
});
})(jQuery);

HTML разметка

<div id="slider-wrap">
  <div id="slider">
    <div class="slide">
      <img src="img/1.png" width="640" height="360">
    </div>
    <div class="slide">
      <img src="img/2.png" width="640" height="360">
    </div>
    <div class="slide">
      <img src="img/3.png" width="640" height="360">
    </div>
    <div class="slide">
      <img src="img/4.png" width="640" height="360">
    </div>
  </div>
</div>

И файл стилей

#slider{ /* Оболочка слайдера */
	width:1540px;
	height:360px;
	overflow: hidden;
	position:relative;}
.slide{ /* Слайд */
	width:640px;
	height:360px;
	float:left;
	margin:0 -85px 0 0;
	}
.sli-links{ /* Кнопки смены слайдов */
	margin-top:10px;
	text-align:center;}
.sli-links .control-slide{
	margin:2px;
	display:inline-block;
	width:16px;
	height:16px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(radioBg.png) center bottom no-repeat;}
.sli-links .control-slide:hover{
	cursor:pointer;
	background-position:center center;}
.sli-links .control-slide.active{
	background-position:center top;}

Сначала у меня все нормально. они выстраиваются, но когда начинается анимация происходит все не так.
У меня в каком-то месте цикл не правильно работает.
И еще мне хочется чтоб они по кругу шли. Я знаю что есть скрипт circle но не понимаю как его использовать. буду очень признателен если кто-то чего-то посоветует или подскажет

Вот то как работает
http://207693.artzozul.web.hosting-test.net/

[Deff]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<style>
#slider{ /* Оболочка слайдера */
	width:1540px;
	height:360px;
	overflow: hidden;
	position:relative;}
.slide{ /* Слайд */
	width:640px;
	height:360px!important;
	float:left;
	margin:0 -85px 0 0;
	}
.sli-links{ /* Кнопки смены слайдов */
	margin-top:10px;
	text-align:center;}
.sli-links .control-slide{
	margin:2px;
	display:inline-block;
	width:16px;
	height:16px;
	overflow:hidden;
	text-indent:-9999px;
	background:url(radioBg.png) center bottom no-repeat;}
.sli-links .control-slide:hover{
	cursor:pointer;
	background-position:center center;}
.sli-links .control-slide.active{
	background-position:center top;}
</style>
<script>
(function ($) {
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = true;
$(document).ready(function(e) {
	//$('.slide').css(
	//	{"left": '0'}).hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = $("#slider .slide").size();
	var animSlide = function(arrow){
		clearTimeout(slideTime);
		$('.slide').eq(slideNum).hide(hwSlideSpeed);
		if(arrow == "next"){
			if(slideNum == (slideCount-1)){slideNum=0;}
			else{slideNum++}
			}
		else if(arrow == "prew")
		{
			if(slideNum == 0){slideNum=slideCount-1;}
			else{slideNum-=1}
		}
		else{
			slideNum = arrow;
			}
		$('.slide').eq(slideNum).show(hwSlideSpeed, rotator);
		$(".control-slide.active").removeClass("active");
		$('.control-slide').eq(slideNum).addClass('active');
		}

	var $adderSpan = '';
	$('.slide').each(function(index) {
			$adderSpan += '<span class = "control-slide">' + index + '</span>';
		});
	$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
	$(".control-slide:first").addClass("active");
	$('.control-slide').click(function(){
	var goToNum = parseFloat($(this).text());
	animSlide(goToNum);
	});
	var pause = false;
	var rotator = function(){
			if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
			}
	$('#slider-wrap').hover(	
		function(){clearTimeout(slideTime); pause = true;},
		function(){pause = false; rotator();
		});
	rotator();
});
})(jQuery);

</script>
<div id="slider-wrap">
  <div id="slider">
    <div class="slide">
      <img src="img/1.png" width="640" height="360">
    </div>
    <div class="slide">
      <img src="img/2.png" width="640" height="360">
    </div>
    <div class="slide">
      <img src="img/3.png" width="640" height="360">
    </div>
    <div class="slide">
      <img src="img/4.png" width="640" height="360">
    </div>
  </div>
</div>
</body>
</html>

IgorArhangel, fadeIn/fadeOut не подходит
нужны обычные show/hide c фиксированной высотой слайда .slide{ height:360px!important;

[IgorArhangel]

Deff,
спс.
Но мне необходимо выстроить все картинки в ряд и по переключению они все чтоб ехали причем по кругу вот как тут

у меня же получается полная ерунда.

[Deff]

IgorArhangel,
имхо простой метод построить одностроковую таблу и переносить с разворачиванием ячейки в начало(или в конец, зависит от направления) таблицы, сворачивая текущую;
================================================== ================
По кругу чтобы ехало, тоже аналогично, переносить слайды с разворачиванием в начало или конец блока обрамляющего слайды

[tsigel]

Зачем делать прокрутку по кругу, если вы хотите сделать перемещение изображений не по "стрелочкам", а по кнопкам привязанным к конкретной картинке?

Самый простой вариант:

<div id="general"><!--Блок с position: relative-->
   <div id="forImages"><!--Блок с position: absolute;-->
      <div class="img1 allImgClass"></div><!--Блок с position: absolute;-->
      <div class="img2 allImgClass"></div><!--Блок с position: absolute;-->
      <div class="img3 allImgClass"></div><!--Блок с position: absolute;-->
      <div class="img4 allImgClass"></div><!--Блок с position: absolute;-->
   </div>
</div>

При такой структуре их надо расставить в ряд (скрипт):

var x = 0;
var num = 0; //Номер картинки
var margin = 5;//отступ между картинками 
$('.allImgClass').each(function () {//Цикл по всем картинкам
  $(this).css({'left': x + 'px'});
  num++;
  x = margin + ($(this).width() + margin * 2) * num;
});

Итак, у нас есть блок forImages, в котором все картинки лежат подряд. Теперь по нажатию на кнопки (1, 2, 3, 4) вам нужно лишь перечислить координаты forImages, при которых необходимая картинка была бы посередине.

Например:

$('.button2').click(function() {
   $('#forImages').css({'left': '-150px'});
})

В данном примере описываю максимально простой, а не правильный способ.

[tsigel]

Такой вариант слайд шоу (который вы пытаетесь сделать тут) сложнее чем со стрелочками (лево / право), и для нормального его создания Вам понадобится научиться связывать элементы между собой.

Это можно сделать с помощью jQuery Data().
Пишите, по мере вопросов - поможем

[IgorArhangel]

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

Извините конечно, может и тупой вопрос, но как переносить слайды в начало или конец?
Никак не могу понять. Было супер если бы пример сюда поставить