Всем привет. Я написал скрипт, только он несовсем правильно работает. По итогу это должнобыть чтото в стиле
http://images.yandex.ru/yandsearch?p...g&rpt= simage . Сейчас имеется галерея, но не работают цыклы с переходами.
Вопрос номер 1: как case1:... запихать в цикл
Вопрос номер Как сделать так, чтоб при наведении на левый или правый крайние блоки, картинки сдвигались в соответствующую сторону.
Прошу помощи, помогите чем можете.
Вот скрипт
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style>
body
{
azimuth:center;
padding: 0px;
margin: 0px;
}
.gallery
{
width: 620px;
height: 540px;
border: 0px;
padding: 0px;
margin: 0px;
border-style:solid;
}
.photobig #swapper
{
width: 620px;
height: 410px;
background-repeat:no-repeat;
background-position:center;
background-position:top;
background-color:#00CC99;
position:fixed;
margin-top:0px;
margin-left: 0px;
}
.photosmol
{
width: 620px;
height: 130px;
background-color: #CC9900;
position:fixed;
margin-top:410px;
margin-left: 0px;
}
.photosmol div.table{
height:0;
}
.photosmol div.tr{
height:0;
}
.photosmol div.table[class] {height:auto; display: table;}
.photosmol div.tr[class] { height:auto; display: table-row;}
.photosmol div.td[class] {float:none; display: table-cell;}
.photosmol div.td {
height: 130px;
float:left;
}
.photosmol #first
{
width:70px;
}
.photosmol #second{
width:120px;
}
.photosmol div.td img
{
border: 2px;
border:solid;
background-color:#FFFFFF;
padding: 2px;
vertical-align: top;
width:120px;
height:90px;
}
</style>
<script type="text/javascript" language="javascript">
function swapImage(a)
{
switch(a)
{
// for (var j = 1; j < 5; j++)
// var twoLayer;
// {
// twoLayer = 'case '+[j]+': document.getElementById("swapper").src = "img/'+[j]+'.jpg"; break; ';
// document.write(twoLayer);
// }
case 0: var i=i+2;
case 1: document.getElementById("swapper").src = "img/1.jpg"; break;
case 2: document.getElementById("swapper").src = "img/2.jpg"; break;
case 3: document.getElementById("swapper").src = "img/3.jpg"; break;
case 4: document.getElementById("swapper").src = "img/4.jpg"; break;
case 5: document.getElementById("swapper").src = "img/5.jpg"; break;
default:
}
}
</script>
<div class="gallery">
<div class="photobig" >
<img id="swapper" src="img/1.jpg">
<div class="photosmol">
<div class="table">
<script type="text/javascript">
var i=0;
var oneLayer;
document.write('<div class="first"><a href="#" onmouseover="javascript:swapImage(0);">1111</a></div>');
var j=i+4;
for (i; i < j; i++) {
oneLayer = '<div class="td"><img src="img/'+[i]+'.jpg" onmouseover="javascript:swapImage('+[i]+');" onmouseout="javascript:swapImage('+[i]+');" style="width:120px; height:90px;"></div>';
document.write(oneLayer);
}
</script>
</div>
</div>
</div>
</div>
</body>
</html>
