Галерейка на JavaScript
Привет всем... Написал скрипт галереи с меняющимися фотками.
Выложил, может кому пригодится.
Суть: Контейнер, в нём два дива. Передний див уменьшается, и появляется следующая фотка. имена файлов картинок лежат в массиве.
Протестировано: IE8, Chrome, FF
Пример: находится здесь
Код:
[HTML]
<html>
<head>
<title>Gallery</title>
<!-- Каждому блоку в стилях указываем нужные размеры width и height -->
<style type="text/css">
body { background: #333333; }
#container { background: #FFFFFF; width: 400px; height:550px; overflow:hidden;}
#front { width: 400px; height: 550px; overflow:hidden; position:absolute; z-index: 100;}
#back { width: 400px; height: 550px; overflow:hidden; position:absolute; z-index: 50;}
#pre { display:none; }
</style>
</head>
<body>
<!-- Сохранить нужно структуру содержащуюся в родительском диве. -->
<div align="center">
<div id="container" align="left">
<div id="back">
</div>
<div id="front">
</div>
</div>
<div id="link">
<!-- Див "link" можно переместить куда вам удобно -->
<a href="java script:next(1);">Следующая</a>
</div>
<div id="pre">
</div>
</div>
<script language="javascript">
var start=400; <!-- Здесь указываем ширину наших дивов-->
var cur;
var pics = new Array ("1.jpg","2.jpg","3.jpg","4.jpg"); <!-- в массиве указываем имена картинок или путь -->
var arlen = pics.length;
for (i=0; i<arlen; i++) {
document.getElementById("pre").innerHTML+='<img src="pics/'+pics+'">';
}
document.getElementById("front").innerHTML='<img src="pics/'+pics[0]+'">';
function next(pic) {
if(pic>=arlen) { pic=0; }
document.getElementById("back").innerHTML='<img src="pics/'+pics[pic]+'">';
cur=start;
slide(pic);
}
function prev (pic) {
if(pic<0) { pic=(arlen-1); }
document.getElementById("back").innerHTML='<img src="pics/'+pics[pic]+'">';
cur=start;
slide(pic);
}
function slide(pic) {
cur=cur-5;
if(cur>5)
{
document.getElementById("front").style.width=cur+"px";
setTimeout("slide("+pic+")", 15);
}
else {
document.getElementById("front").innerHTML='<img src="pics/'+pics[pic]+'">';
document.getElementById("front").style.width=start+"px";
document.getElementById("link").innerHTML='<a href="java script:prev('+(pic-1)+');">предыдущая</a> <a href="java script:next('+(pic+1)+');">следующая</a>';
}
}
</script>
</body>
</html>
[/HTML]
Добавил невидимы див pre куда загружаются все картинки, чтобы они не подгружались при "перелистывании"
Выложил, может кому пригодится.
Суть: Контейнер, в нём два дива. Передний див уменьшается, и появляется следующая фотка. имена файлов картинок лежат в массиве.
Протестировано: IE8, Chrome, FF
Пример: находится здесь
Код:
[HTML]
<html>
<head>
<title>Gallery</title>
<!-- Каждому блоку в стилях указываем нужные размеры width и height -->
<style type="text/css">
body { background: #333333; }
#container { background: #FFFFFF; width: 400px; height:550px; overflow:hidden;}
#front { width: 400px; height: 550px; overflow:hidden; position:absolute; z-index: 100;}
#back { width: 400px; height: 550px; overflow:hidden; position:absolute; z-index: 50;}
#pre { display:none; }
</style>
</head>
<body>
<!-- Сохранить нужно структуру содержащуюся в родительском диве. -->
<div align="center">
<div id="container" align="left">
<div id="back">
</div>
<div id="front">
</div>
</div>
<div id="link">
<!-- Див "link" можно переместить куда вам удобно -->
<a href="java script:next(1);">Следующая</a>
</div>
<div id="pre">
</div>
</div>
<script language="javascript">
var start=400; <!-- Здесь указываем ширину наших дивов-->
var cur;
var pics = new Array ("1.jpg","2.jpg","3.jpg","4.jpg"); <!-- в массиве указываем имена картинок или путь -->
var arlen = pics.length;
for (i=0; i<arlen; i++) {
document.getElementById("pre").innerHTML+='<img src="pics/'+pics+'">';
}
document.getElementById("front").innerHTML='<img src="pics/'+pics[0]+'">';
function next(pic) {
if(pic>=arlen) { pic=0; }
document.getElementById("back").innerHTML='<img src="pics/'+pics[pic]+'">';
cur=start;
slide(pic);
}
function prev (pic) {
if(pic<0) { pic=(arlen-1); }
document.getElementById("back").innerHTML='<img src="pics/'+pics[pic]+'">';
cur=start;
slide(pic);
}
function slide(pic) {
cur=cur-5;
if(cur>5)
{
document.getElementById("front").style.width=cur+"px";
setTimeout("slide("+pic+")", 15);
}
else {
document.getElementById("front").innerHTML='<img src="pics/'+pics[pic]+'">';
document.getElementById("front").style.width=start+"px";
document.getElementById("link").innerHTML='<a href="java script:prev('+(pic-1)+');">предыдущая</a> <a href="java script:next('+(pic+1)+');">следующая</a>';
}
}
</script>
</body>
</html>
[/HTML]
Добавил невидимы див pre куда загружаются все картинки, чтобы они не подгружались при "перелистывании"