jQuery слайдшоу - JavaScript, Ajax

paravoz · 18.04.2011, 18:50

Добрый день.

Сам очень часто работаю с PHP но с JavaScript'ами ни разу не сталкивался.
Скачал скрипт слайдшоу. Вроде разобрался как его можно применить на сайте, но ни как не могу сообразить как движущиеся картинки сделать еще и ссылками. Простой вставкой их в тег <a></a> не получается.

Вот сам файл HTML.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.flexislider.js" type="text/javascript"></script>
</head>
<body>
	<div id="slider">
		<div id="imageloader">
   <img src="images/ajax-loader.gif" />
		</div>
    <img src="images/sample1.jpg" >
		<img src="images/sample2.jpg" >
		<img src="images/sample3.jpg" >
    	</div>
</body>
</html>

Таблица стилей:

Код:

#slider {position: relative; overflow: hidden;height:300px;}
#slider img {position:absolute;	margin:0; height:155px;;display:none;}
#imageloader {position:relative; display:block; width: 100%; margin: 0px auto; text-align: center;}
#imageloader img { position:relative; top:70px; z-index:100; width:128px; height:15px; display:inline;}

и собственно сам скрипт:

Код:

	var speed = 100;
	var pic, numImgs, arrLeft, i, totalWidth, n, myInterval; 

$(window).load(function(){
	pic = $("#slider").children("img");
	numImgs = pic.length;
	arrLeft = new Array(numImgs);
	
	for (i=0;i<numImgs;i++){
		
		totalWidth=0;
		for(n=0;n<i;n++){
			totalWidth += $(pic[n]).width();
		}
		
		arrLeft[i] = totalWidth;
		$(pic[i]).css("left",totalWidth);
	}
	
	myInterval = setInterval("flexiScroll()",speed);
	$('#imageloader').hide();
	$(pic).show();	
});

function flexiScroll(){

	for (i=0;i<numImgs;i++){
		arrLeft[i] -= 1;		

		if (arrLeft[i] == -($(pic[i]).width())){	
			totalWidth = 0;	
			for (n=0;n<numImgs;n++){
				if (n!=i){	
					totalWidth += $(pic[n]).width();
				}			
			}	
			arrLeft[i] =  totalWidth;	
		}					
		$(pic[i]).css("left",arrLeft[i]);
	}
}

Подскажите пожалуйста. Мне почему-то кажется что это просто, но не могу дотянуть и все.

ersl · 26.04.2011, 19:31

Строчку изменить так

Код:

pic = $("#slider a:parent").children("img");

а html-код так

Код HTML:

<div id="slider">
		<div id="imageloader">
			<img src="images/ajax-loader.gif" />
		</div>
		<a href="#1"><img src="images/diz3.png" ></a>
		<a href="#2"><img src="images/diz4.png" ></a>
		<a href="#3"><img src="images/diz5.png" ></a>
    </div>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
JQuery	ser70	JavaScript, Ajax	2	16.08.2010 16:39
Слайдшоу	filin67	JavaScript, Ajax	0	27.03.2010 16:47
jQuery itself	spein	JavaScript, Ajax	4	25.12.2009 22:30
Слайдшоу	Davl	Мультимедиа в Delphi	6	02.12.2007 13:37