|
Сообщение от Iktash
|
|
я не могу сделать эти картинки ссылками
|
<!DOCTYPE html>
<html>
<head>
<title>Стек для слайдшоу JQuery</title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cwidth = parseInt($("#container").css("width").replace("px", "")); // Получаем ширину контейнера с изображениями
var img_count = $("#img_container").children().length; // Количество изображений
var img_width = $("#img1").width(); // Ширина одного изображения
var divider = cwidth / img_count; // Ширина полоски, выделяемой для изобржаения в отсутствии курсора мыши над контейнером
var small_space = (cwidth - img_width) / (img_count - 1); // Ширина полоски, выделяемой для изобржаения при наличии курсора мыши над контейнером
var timer = null; // Таймер
// Устанавливаем позиции изображений
var cssleft = Array();
$("#img_container img").each(function(index) {
// Координаты хранятся в массиве
cssleft[index] = new Array();
// Вычисляем и устанавливаем позицию изображения при отсутстсвии курсора мыши над контейнером
cssleft[index][0] = (index * divider) - (index * img_width);
$(this).css("left", cssleft[index][0] + "px");
// Вычисляем позицию изображения при наведенном на него курсоре мыши
cssleft[index][1] = (index * small_space) - (index * img_width);
// Вычисляем координату правого угла изобржаения
var index2 = index;
if (index2 == 0) {
index2++;
}
cssleft[index][2] = cssleft[index2 - 1][1];
});
// Курсор мыши над изображением
$("#img_container img").mouseenter(function() {
if (timer) {
clearTimeout(timer);
timer = null;
}
var self = this;
// Таймер используется для предотвращения "дергания" при быстром перемещении куросра мыши
// над контейнером с изображениями
timer = setTimeout(function() {
var img_id = parseInt($(self).attr("id").replace("img", "")) - 1;
if ($(self).attr("id") != "img1") {
$(self).animate({
left: cssleft[img_id][1]
}, 300);
}
loopNext(self);
loopPrev(self);
}, 200)
});
// Когда курсор мыши покидает контейнер изображений, возвращаем все в исходное состояние
$("#img_container").mouseleave(function() {
if (timer){
clearTimeout(timer);
timer = null;
}
$("#img_container img").each(function(index) {
$(this).animate({
left: cssleft[index][0]
}, 300);
});
});
function loopPrev(el) {
if ($(el).prev().is("img")) {
var imgprev_id = parseInt($(el).attr("id").replace("img", ""));
if ($(el).prev().attr("id") != "img1") {
$(el).prev().animate({
left: cssleft[imgprev_id - 2][1]
}, 300);
}
loopPrev($(el).prev());
}
}
function loopNext(el) {
if ($(el).next().is("img")) {
var imgnext_id = parseInt($(el).attr("id").replace("img", ""));
$(el).next().animate({
left: cssleft[imgnext_id][2]
}, 300);
loopNext($(el).next());
}
}
});
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, "Free Sans";
}
#container {
margin: 0 auto;
margin-top: 50px;
width: 800px;
height: 350px;
overflow: hidden;
border: 10px solid #000;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
#img_container {
width: 4000px;
}
#img_container img {
position: relative;
-moz-box-shadow: -5px 0 10px #000;
-webkit-box-shadow: -5px 0 10px #000;
box-shadow: -5px 0 10px #000;
width: 600px;
float: left;
margin: 0;
}
#img1 { z-index: 0; }
#img2 { z-index: 1; }
#img3 { z-index: 2; }
#img4 { z-index: 3; }
#img5 { z-index: 4; }
</style>
</head>
<body>
<div id="container">
<div id="img_container">
<img id="img1" src="img/01.jpg" data="http://javascript.ru/"/>
<img id="img2" src="img/02.jpg" data="http://www.google.ru/"/>
<img id="img3" src="img/03.jpg" data="http://www.google.ru/"/>
<img id="img4" src="img/04.jpg" data="http://www.google.ru/"/>
<img id="img5" src="img/05.jpg" data="http://www.google.ru/"/>
</div></div>
<script type="text/javascript">
$("#img_container img").click(function (){
window.open($(this).attr('data'));
});
</script>
</body>
</html>