slide show starts in 5s
<!DOCTYPE html>
<html>
<head>
<title>chen assignment 4</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var pictures = new Array("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaOOXVWayqCzU6sXWcRThvhtld8nO5XXS7zrLVG6bjVsjNFzEwB8RMI4kWl1S9QuqMNDyM5JhS7aU3O1PHVGpXTnAHgKCF9ZINaqIAJZTjOre5nwn8sSfFVqemPQQ1rs3elsAWRSm7_O8/s320/bow+lake.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYabgkdpzry3odz9_fvM0b0NXY3Gd37joXJjlRoGjuz2iLS5xJqZ0ukQ8057cHC_TpC76Wsq8SP_zVBJVEVr1G__Y8spKQtmgb5ouCb84604V_VWRYKrdVol6RZJyLxvJ-X3ydARqXOM/s320/emerald+lake.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAjJcbMm6aXoAURkOJ3gJzBeSkXcnTty0AI9QIrn_RBN9jd5A5BrTVTWWGd9VFziHvD3raw-eGd8JKzf_ro-7ye1iAR1u7iTSL2-gUlheBbSr2PgtxmVjWlUwfxZwtYXk6zS5Yemh1vNI/s320/ice+field+park.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfVFYAGdK47-UFdRek1MQr7xcWBMLefZHNbREzFU-u82Dc37tG5E7IIxz2veBxBO7af0d8EsJllCgxpStFfd9UatmFAS5Gb3rGzh4cC6poeBWDf2bObOGTc2j9ZKwW8lYynCK0q-I-oY/s320/lake+louise.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8g8OA8GT1FmDbApmTfJ7zbY-R4EIJdwhqry9zR_fowWPRf-I5bQYTtkWZPMkH3C6Ygx0D7zZUovu92C6hkk7jBW-TIpZlWmgfdJfExrWRXOT6oqWsXGAYQmMQeY10ZzJbc_PO0drzDL0/s320/peyto+lake.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLHJq_0yihkJCiTMcN7_UK6IMWKdlvMRdtejr4m5ty-4fbuz28STArO4ftIx9VT1Fp445YzsZnuCoyE3uAFtLap914561Py1yqdxbzDadsdXIlKbOG7UAx-qlYCpbeFw1VA4RRlMx9hgI/s320/red+rock+canyon.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwbPRV5bLqp7Q-IBOLQ6YlML0Y8LjLk_SG5owP39A80et5r2sHWWplSorhDGfpt0B07BKEjb1bRE645EX7lEcNN9TIo_kwy-y4LLX-cOwvrFDw_mgR2myJjKVAq5ZGtTNDUcHum2nFFws/s320/ten+peaks+valley.jpg", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUqZ4_knyGfrLmc_Oi62CLMn2drchVJyFgKkYHIMlN_2DyLypCQvKv6cNDvi-ggrdmx_wEkm4Mv7iElxCqrtJf5ec8IF-am30m6PEVbvx7UGrj9sFaSy0RvaeW6yRu-7amZc-lvjArU8/s320/waterton+cruise.jpg");
var description = new Array("bow lake", "emerald lake", "ice field park", "lake louise",
"peyto lake", "red rock canyon", "ten peaks valley", "waterton cruise");
var i = parseInt(0);
$(document).ready(function () {
setInterval(
function () {
if (i == pictures.length) { i = 0; }
//$("#img").src = pictures[i];
document.getElementById("img_").visibility = "hide";
document.getElementById("img_").src = pictures[i];
$("#img_note").html(description[i]);
$("#img_").fadeIn(1000).delay(3000).fadeOut(1000);
document.getElementById("img_").visibility = "hide";
i++;
$("#wait").html("");
}
, 5100);
});
</script>
<style>
#img_ {
height: 300px;
visibility: hide;
}
#frame_ {
height: 350px;
}
</style>
</head>
<body>
<p id="wait">slide show starts in 5s</p>
<div id="frame_" align="center">
<img src="" id="img_" alt="img" />
<br />
</div>
<div align="center">
<span id="img_note"></span>
</div>
</body>
</html>
No comments:
Post a Comment