фотогаллереи на js
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<style type="text/css">
.navi { text-align: center; }
.navi b { color: blue; cursor: pointer; text-decoration: underline; }
</style>
<body>
<div style="height: 220px; text-align: center;">
<img src="https://programming-new.my1.ru/flore/garRoz/1088_1.jpg" alt="" id="slide_show"><br>
<span id="slide_text"></span>
</div>
<script type="text/javascript">
var imgs = ['https://programming-new.my1.ru/flore/garRoz/1-24-700x489.jpg','https://programming-new.my1.ru/flore/garRoz/1088_1.jpg','https://programming-new.my1.ru/flore/garRoz/Dizajn-bez-nazvi-5.jpg']
var n = 0;
time = 600;
play = setInterval("chgImg(0)", 9000);
function chgImg(number) {
// затемнеие стоящ карт и после вызов фнкции
$("#slide_show").fadeOut(time, function() { //для картинок
// замена на следующ карт и засвет
$(this).attr("src", imgs[n]).fadeIn(time);
});
n++;
if (n>=imgs.length) n = 0;
}
</script>
</body>
</html>
//----------------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<style type="text/css">
.navi { text-align: center; }
.navi b { color: blue; cursor: pointer; text-decoration: underline; }
</style>
<body>
<div style="height:350px;">
<!---->
<img src="https://programming-new.my1.ru/flore/garRoz/1-24-700x489.jpg" alt="" id="slide_show" style="position:absolute;">
<img src="image/li_11.png" alt="" id="slide_show2"
style="position:absolute;display:none;">
</div>
<div style="height:20px;">
<p id="slide_text" style="position:absolute;">Посещаемость по дням</p>
<p id="slide_text2" style="position:absolute;display:none;">Посещаемость по дням</p>
</div>
<!-- /Yandex.Metrika counter -->
<div class="navi">
<b onclick="https://programming-new.my1.ru/flore/garRoz/Dizajn-bez-nazvi-5.jpg">Давай вторую</b>
<b onclick="https://programming-new.my1.ru/flore/garRoz/images_cms-image-000034718.jpg">Давай четвертую</b><br><br>
<b onclick="clearInterval(go);">Стоп</b>
<b onclick="clearInterval(go);go=setInterval('chgImg(0)',3000);">Продолжить</b>
</div>
<script type="text/javascript">
var imgs = ['https://programming-new.my1.ru/flore/garRoz/1-24-700x489.jpg','https://programming-new.my1.ru/flore/garRoz/1088_1.jpg','https://programming-new.my1.ru/flore/garRoz/Dizajn-bez-nazvi-5.jpg','https://programming-new.my1.ru/flore/garRoz/images_cms-image-000034718.jpg'];
var text = ['Посещаемость по дням','<a href="script.php">Посещаемость по неделям</a>',
'<font color="red">Посещаемость по месяцам</font>','<b>Среднесуточная</b>'];
var n = 0;
var next = "";
$(document).ready(function(){ go = setInterval("chgImg(0)", 3000); });
function chgImg(number) {
n++;
if (n>=imgs.length) n = 0;
if (next=="") next = 2;
else next = "";
$('#slide_show'+next).attr('src',imgs[n]);
$('#slide_text'+next).html(text[n]);
$('[id^=slide_show], [id^=slide_text]').fadeToggle(2000);
}
</script>
</body>
</html>
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<style type="text/css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
//<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>
<script>
$(document).foundation();
</script>
<script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
<script>
</style>
<style>
body {
background: #c7b39b url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTzhnHjURIlzc6jsa1LrpjRMShoHY7o-eIBQDSlG2JrUVSw_YVL);
}
</style>
<style>
.callout.primary {
background-color:#FFE4B5 ;
}
</style>
<style>
.top-bar, .top-bar ul {
background-color:#E9967A;
}
</style>
<body>
<div class="medium-6 columns">
<img class="thumbnail" id="par1" src="media/images/d2.jpg">
<div class="row small-up-4">
<div class="column">
<img class="thumb" src="media/images/d4.jpg">
</div>
<div class="column">
<img class="thumb" src="media/images/d3.jpg">
</div>
<div class="column">
<img class="thumb" src="media/images/d6.jpg">
</div>
<div class="column">
<img class="thumb" src="media/images/d7.jpg">
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".thumb").click(function(event) {
$("#par1").attr("src",(event.target.src))
$(".thumb").css("cursor"," pointer");
});
});
</script>
</body>
</html>
//--------------------------------------------------------------------------------------------------------------------------------------------------
<body bgcolor="#A1FEF9">
<img id="largeImg" src="D:\Квіти\20230715_161826.jpg" alt="Large image" />
<p class="thumbs">
<a href="kvita\20220430_185603.jpg" title="Image 1"><img src="kvita\20220430_185603.jpg" /></a>
<a href="kvita\20220430_185614.jpg" title="Image 2"><img src="kvita\20220430_185614.jpg" /></a>
<a href="kvita\20220612_164119.jpg" title="Image 3"><img src="kvita\20220612_164119.jpg" /></a>
<a href="kvita\20220612_170403.jpg" title="Image 4"><img src="kvita\20220612_170403.jpg" /></a>
<a href="kvita\20220612_170309.jpg" title="Image 5"><img src="kvita\20220612_170309.jpg" /></a>
</p>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".thumbs a").mouseenter(function(){
var largePath = $(this).attr("href");// тута(где произошло событие)
$("#largeImg").attr({src:largePath});
});
});
</script>
</body>
|