|
21
1763
|
<html>
<head>
<script src="jquery-1.7.1.min.js">
</script>
<script>
function swapImages(){
var $active = $('#galleri .active');
var $next = ($('#galleri .active').next().length > 0) ? $('#galleri .active').next() : $('#galleri img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
<style>
#galleri{
position:relative;
width:400px;
height:300px;
}
#galleri img{
display:none;
position:absolute;
top:0;
left:0;
}
#galleri img.active{
display:block;
}
</style>
</head>
<body>
<div id="galleri">
<img src="image1.jpg" class="active" />
<img src="image2.jpg" />
<img src="image3.jpg" />
</div>
</body>
</html>
<html>
<head>
<title>Bilderotering</title>
<style type="text/css">
#ad-container > * { display: block; }
#ad-container #active-ad { display: block; }
</style>
</head>
<body>
<div id="ad-container">
<img id="active-ad" src="http://t3.gstatic.com/images?q=tbn:ANd9GcSN0oUK__cYS3CIELAwz41FnXxUDP4F_08_tkOd4OnwzZsLahNbRQ" />
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcR1JWBf3lUlWXngbdWIgF7_3rEnCOFikevhUq5lyZemPypifx2iRw" />
</div>
</body>
<!--
Javascript lastes etter at vesentlig DOM elementer er lastet inn
Dersom det ønskes å laste inn tidligere må man ty til onLoad eller
utvide feilhåndtering i script
-->
<script type="text/javascript">
// Funksjon for å sile ut siblings som ikke er elementer. teksnoder etc.
function getAd(el) {
do el = el.nextSibling;
while (el && el.nodeType != 1);
return el;
}
// Hovedfunksjonen for å loope igjennom bilder/annonser
function rotateAd() {
// Finn elementet som er identifisert som "active-ad"
var currentAd = document.getElementById('active-ad');
// Finn neste annonse for nåværende annonse eller den første i "ad-container"
var nextAd = getAd(currentAd) || getAd(document.getElementById('ad-container').firstChild);
// gjem nåværende annonse
currentAd.style.display = 'none';
// deaktiver/uidentifiser nåværende
currentAd.id = '';
// vis neste annonse
nextAd.style.display = 'block';
// aktiver neste annonse
nextAd.id = 'active-ad';
// Sett en timer som kjører denne rutinen om x antall millisekoner.
// Her satt til 2000 millisekunder / 2 sekunder
var t = setTimeout('rotateAd()', 2000);
}
// kjør rotateAd-funksjonen for første gang for å starte en timet loop
// gjennom annonsene
rotateAd();
</script>
</html>
<html>
<head>
<script src="jquery-1.7.1.min.js">
</script>
<script>
function swapImages(){
var $active = $('#galleri .active');
var $next = ($('#galleri .active').next().length > 0) ? $('#galleri .active').next() : $('#galleri img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
});
</script>
<style>
#galleri{
position:relative;
width:1045px;
height:150px;
}
#galleri img{
display:none;
position:absolute;
top:0;
left:0;
}
#galleri img.active{
display:block;
}
</style>
</head>
<body>
<div id="galleri">
<img src="http://***********/storage/rotator/test/Canon.swf" class="active" />
<img src="http://***********/storage/rotator/test/Ricoh_Animert-banner_1045x150px_NO_032012-1.gif" />
</div>
</body>
</html>
var imgInt = 0;
function changeImgSrc () {
var img = document.getElementById ("ID_TIL_IMG_TAG");
var imgArray = {
"bilde1.jpg",
"bilde2.png",
"bilde3.gif",
[...]
};
img.src = imgArray [imgInt % 3];
}
setInterval ("changeImgSrc();", 10000);
|
|