Управляемое слайдшоу jQuery с проявляющейся сменой изображений

Управляемое слайдшоу jQuery с проявляющейся сменой изображений , автоматическая , последовательная ручная кнопками или произвольная индивидуальными кнопками .


Главная страница сайта .
Реальный пример .
скачать архив Javascript
Водолаз в море с большой рыбой
HTML данного примера .
<div id="dem">
<div class="imgage entry_1">
<img class="imgmain" alt="" src="/FPD/001.jpg">
<div class="text">Водолаз в море с большой рыбой</div></div>
<div class="imgage entry_2 hidden">
<img class="imgmain" alt="" src="http://runettex.clan.su/FPD/002.jpg">
<div class="text">Орёл на фоне заката</div></div>
<div class="imgage entry_3 hidden">
<img class="imgmain" alt="" src="http://runettex.clan.su/FPD/003.jpg">
<div class="text">Скат на глубине пробиваемой бликом солнца</div></div>
<div class="imgage entry_4 hidden">
<img class="imgmain" alt="" src="http://runettex.clan.su/FPD/004.jpg">
<div class="text">Белоголовый орёл символ США</div></div>
<div class="imgage entry_5 hidden">
<img class="imgmain" alt="" src="http://runettex.clan.su/FPD/005.jpg">
<div class="text">Дельфин Красного моря</div></div>
<div class="imgage entry_6 hidden">
<img class="imgmain" alt="" src="http://runettex.clan.su/FPD/006.jpg">
<div class="text">Рыба , просто тупо - рыба</div></div>
<div class="imgage entry_7 hidden">
<img class="imgmain" alt="" src="http://runettex.clan.su/FPD/007.jpg">
<div class="text">Жёлтые рыбёшки</div></div>
<div class="imgage entry_8 hidden">
<img class="imgmain" alt="" src="http://runettex.clan.su/FPD/008.jpg">
<div class="text">Белая акула</div></div>
<div class="imgage entry_9 hidden">
<img class="imgmain" alt="" src="http://runettex.clan.su/FPD/009.jpg">
<div class="text">Рогатая змея</div></div>
<div class="imgage entry_10 hidden">
<img class="imgmain" alt="" src="http://runettex.clan.su/FPD/010.jpg">
<div class="text">Мохнатик паучок четырёхглазый</div></div>
<ul id="nav3">
<li class="page_1"><a onclick="eSq('dem','1','3','1','1')" href="javascript:void(0);">
<img alt="" title="Водолаз в море с большой рыбой" src="http://runettex.clan.su/FPD/off.gif"></a></li>
<li class="page_2"><a onclick="eSq('dem','2','3','2','1')" href="javascript:void(0);">
<img alt="" title="Орёл на фоне заката" src="http://runettex.clan.su/FPD/off.gif"></a></li>
<li class="page_3"><a onclick="eSq('dem','3','3','3','1')" href="javascript:void(0);">
<img alt="" title="Скат на глубине пробиваемой бликом солнца" src="http://runettex.clan.su/FPD/off.gif"></a></li>
<li class="page_4"><a onclick="eSq('dem','4','3','4','1')" href="javascript:void(0);">
<img alt="" title="Белоголовый орёл символ США" src="http://runettex.clan.su/FPD/off.gif"></a></li>
<li class="page_5"><a onclick="eSq('dem','5','3','5','1')" href="javascript:void(0);">
<img alt="" title="Дельфин Красного моря" src="http://runettex.clan.su/FPD/off.gif"></a></li>
<li class="page_6"><a onclick="eSq('dem','6','3','6','1')" href="javascript:void(0);">
<img alt="" title="Рыба , просто тупо - рыба" src="http://runettex.clan.su/FPD/off.gif"></a></li>
<li class="page_7"><a onclick="eSq('dem','7','3','7','1')" href="javascript:void(0);">
<img alt="" title="Жёлтые рыбёшки" src="http://runettex.clan.su/FPD/off.gif"></a></li>
<li class="page_8"><a onclick="eSq('dem','8','3','8','1')" href="javascript:void(0);">
<img alt="" title="Белая акула" src="http://runettex.clan.su/FPD/off.gif"></a></li>
<li class="page_9"><a onclick="eSq('dem','9','3','9','1')" href="javascript:void(0);">
<img alt="" title="Рогатая змея" src="http://runettex.clan.su/FPD/off.gif"></a></li>
<li class="page_10"><a onclick="eSq('dem','10','3','10','1')" href="javascript:void(0);">
<img alt="" title="Мохнатик паучок четырёхглазый" src="http://runettex.clan.su/FPD/off.gif"></a></li>
<li class="but"><a onclick="eSq('dem','prev','3','10','1')" href="javascript:void(0);">
<img alt="" title="Просмотр назад" alt="" src="http://runettex.clan.su/FPD/back.gif"></a></li>
<li class="but"><a onclick="eSq('dem','next','3','10','1')" href="javascript:void(0);">
<img alt="" title="Просмотр вперёд" alt="" src="http://runettex.clan.su/FPD/next.gif"></a></li>
</ul>
<script type="text/javascript" charset="utf-8">
var dem_click = 1; var dem_auto = 1; $(document).ready(function(){var auto=setTimeout("eSq_auto('dem','next','10','10','1');",5000);});
</script>
</div>
CSS данного примера .
#dem {position: relative; top: 0px; left: 0px; width: 620px; height: 450px;}
.hidden {display: none;}
.imgage {position: absolute; top: 0px; left: 0px;}
.text {z-index: 3; position: absolute; color: #000; font: bold 12pt "Courier New", Courier, monospace; top: 0px; left: 0px; background-color: #ddd; width: auto; padding: 0px 10px; margin: 10px;}
#nav3 {z-index: 5; position: absolute; bottom: 3px; right: 3px;}
#nav3 li {z-index: 10; padding: 2px; float: left; list-style-type: none;}
img {border: 0px;}
.imgmain {width: 620px; height: 450px;}

Non-Commercial Use: Free Runettex_team_ESQ © 2009 - 2024 Хостинг от uCoz