Image roteren om x aantal seconde

Status
Niet open voor verdere reacties.
G

GuyM

Gebruiker
Lid geworden
28 aug 2008
Berichten
12
Ik heb in mijn head van de pagina het volgende gedeclareerd staan:

<script language="JavaScript1.1">
<!--
var image="";
var banners=0;
function cycle() {
if (++banners > 3) banners=1;
loadbanners();
document.banner1.src = image;
window.setTimeout('cycle();',3000);
}
function loadbanners() {
if (banners==1)
{
image=" link naar image";
}
if (banners==2)
{
image="link naar image";
}
if (banners==3)
{
image="link naar image";
}
}
//-->
</script>
<script language="JavaScript1.1">
<!--
var link = "link naar pagina"
function urlswitch() {
if (banners==1)
{
link = "link naar pagina";
}
if (banners==2)
{
link = "link naar pagina";
}
if (banners==3)
{
link = "link naar pagina";
}
return link;
}
//-->
</script>

Het volgende staat in mijn body:

<td height="95" valign="center"><a href="link naar pagina" onclick="this.href=urlswitch()" target="_blank">
<img width="295" height="71" border="0" src="hier het plaatje></a></td>

Nu is mijn vraag ik heb meer dan 3 banners gedefinieerd nu kan ik in mijn body 1 target definieeren die op _blank staat maar het 2 plaatje moet op _self of _parent staan hoe kan ik dit doen?

Alvast bedankt!
 
Doe zoiets: ;)


HTML: 
<a id="bannerLink" href="http://www.domain.nl/url1.html" target="_blank"><img id="bannerImage" style="width: 295px; height: 71px; border-width: 0px" src="http://www.domain.nl/image1.jpg" /></a>

<script>
//<![CDATA[

window.setTimeout('updateBanner();',3000);

var bannerImages = new Array(
  "http://www.domain.nl/image1.jpg",
  "http://www.domain.nl/image2.jpg",
  "http://www.domain.nl/image3.jpg",
  "http://www.domain.nl/image4.jpg"
)

var bannerUrls = new Array(
  "http://www.domain.nl/url1.html",
  "http://www.domain.nl/url2.html",
  "http://www.domain.nl/url3.html",
  "http://www.domain.nl/url4.html"
)

var bannerTargets = new Array(
  "_blank",
  "_self",
  "_blank",
  "self"
)

var currentBanner = 0;

function updateBanner()
{
  if (!this.link)
    this.link = document.getElementById("bannerLink");
  if (!this.img)
    this.img = document.getElementById("bannerImg");

  if (currentBanner++ >= bannerImages.length)
    currentBanner = 0;

  this.link.href = bannerUrls[currentBanner];
  this.link.target = bannerTargets[currentBanner];
  this.img.src = bannerImages[currentBanner];
}
//]]>
</script>
 
Glest zei:
Doe zoiets: ;)


HTML: 
<a id="bannerLink" href="http://www.domain.nl/url1.html" target="_blank"><img id="bannerImage" style="width: 295px; height: 71px; border-width: 0px" src="http://www.domain.nl/image1.jpg" /></a>

<script>
//<![CDATA[

window.setTimeout('updateBanner();',3000);

var bannerImages = new Array(
  "http://www.domain.nl/image1.jpg",
  "http://www.domain.nl/image2.jpg",
  "http://www.domain.nl/image3.jpg",
  "http://www.domain.nl/image4.jpg"
)

var bannerUrls = new Array(
  "http://www.domain.nl/url1.html",
  "http://www.domain.nl/url2.html",
  "http://www.domain.nl/url3.html",
  "http://www.domain.nl/url4.html"
)

var bannerTargets = new Array(
  "_blank",
  "_self",
  "_blank",
  "self"
)

var currentBanner = 0;

function updateBanner()
{
  if (!this.link)
    this.link = document.getElementById("bannerLink");
  if (!this.img)
    this.img = document.getElementById("bannerImg");

  if (currentBanner++ >= bannerImages.length)
    currentBanner = 0;

  this.link.href = bannerUrls[currentBanner];
  this.link.target = bannerTargets[currentBanner];
  this.img.src = bannerImages[currentBanner];
}
//]]>
</script>
Klik om te vergroten...

Heb dit toegepast en currentBanner verandert alleen loopt hij zodra de refresh van 3 sec uitgevoerd moet worden tegen volgende fout aan this.im is leeg of geen object.

Wat gaat er fout?

Alvast bedankt

Ik heb gevonden wat er fout gaat:

<script>
//<![CDATA[

window.setTimeout('updateBanner();',3000);

var bannerImages = new Array(
"http://plaatje",
"http://plaatje",
"http://plaatje"
)

var bannerUrls = new Array(
"http://link",
"http://link",
"http://link"
)

var bannerTargets = new Array(
"_self",
"_blank",
"_blank"
)

var currentBanner = 0;

function updateBanner()
{
if (!this.link)
this.link = document.getElementById("bannerLink");
if (!this.img)
this.img = document.getElementById("bannerImg");

if (currentBanner++ >= bannerImages.length)
currentBanner = 3;

this.link.href = bannerUrls[currentBanner];
this.link.target = bannerTargets[currentBanner];
this.img.src = bannerImages[currentBanner];
}
//]]>
</script>
</head>
<body>

<a id="bannerLink" href="link" target="_self"><img id="bannerImg" style="width: 295px; height: 71px; border-width: 0px" src="plaat=je" /></a>


</body>

Is het mogelijk om deze in een oneindige loop te zetten wat hij stopt bij mij om de een of andere reden op de 2e image en gaat niet verder?

Alvast bedankt
 
Laatst bewerkt:
nooit oneindige loops maken in Javascript :eek:

Maar dit:
window.setTimeout('updateBanner();',3000);

moet dit zijn:
window.setInterval('updateBanner();',3000);

en die foutmelding, this.im? niet this.img?

Maar zet het script in de body, onder de <a><img /></a> tags.
 
Laatst bewerkt:
Glest zei:
nooit oneindige loops maken in Javascript :eek:

Maar dit:
window.setTimeout('updateBanner();',3000);

moet dit zijn:
window.setInterval('updateBanner();',3000);

en die foutmelding, this.im? niet this.img?

Maar zet het script in de body, onder de <a><img /></a> tags.
Klik om te vergroten...

Klopt het werkt nu met setInterval maar hij herhaalt hem niet dus hij laat b.v. de eerste 3 banners keurig zien daarna wil hij blijkbaar meer images laten zien die hij niet kan displayen en hij begint niet weer van voor af aan door de images te lopen.

Dus bedoel zodra hij bij 3 is weer bij 1 begint en door die code loopt.

Alvast bedankt!
 
dat komt doordat je deze twee regels hebt veranderd:
Code: 
if (currentBanner++ >= bannerImages.length)
  currentBanner = 3;

Die moeten gewoon dit zijn (zoals in mijn orginele script)
Code: 
if (currentBanner++ >= bannerImages.length)
  currentBanner = 0;



Oh, en dit:
Code: 
  if (currentBanner++ >= bannerImages.length)

moet zo:
Code: 
  currentBanner++;
  if (currentBanner >= bannerImages.length)
Anders wordt de laatste banner twee keer achterelkaar gebruikt


Dus in totaal:
Code: 
  currentBanner++;
  if (currentBanner >= bannerImages.length)
    currentBanner = 0;
 
Laatst bewerkt:
Glest zei:
dat komt doordat je deze twee regels hebt veranderd:
Code: 
if (currentBanner++ >= bannerImages.length)
  currentBanner = 3;

Die moeten gewoon dit zijn (zoals in mijn orginele script)
Code: 
if (currentBanner++ >= bannerImages.length)
  currentBanner = 0;



Oh, en dit:
Code: 
  if (currentBanner++ >= bannerImages.length)

moet zo:
Code: 
  currentBanner++;
  if (currentBanner >= bannerImages.length)
Anders wordt de laatste banner twee keer achterelkaar gebruikt


Dus in totaal:
Code: 
  currentBanner++;
  if (currentBanner >= bannerImages.length)
    currentBanner = 0;
Klik om te vergroten...


Klopt hij werkt nu alleen krijg ik na de laatste banner een leeg plaatje te zien en daarna begint hij weer bij 1 ik heb 3 banners en hij denk dat hij een vierde moet plaatsen maar hij moet eigenlijk bij 1 weer beginnen

<script>
//<![CDATA[

window.setInterval('updateBanner();',3000);

var bannerImages = new Array(
"plaatje",
"plaatje",
"plaatje"
)

var bannerUrls = new Array(
"link",
"link",
"link"
)

var bannerTargets = new Array(
"_self",
"_blank",
"_blank"
)

var currentBanner = 0;

function updateBanner()
{
if (!this.link)
this.link = document.getElementById("bannerLink");
if (!this.img)
this.img = document.getElementById("bannerImg");

if (currentBanner++ >= bannerImages.length)
currentBanner = 0;

this.link.href = bannerUrls[currentBanner];
this.link.target = bannerTargets[currentBanner];
this.img.src = bannerImages[currentBanner];
}
//]]>
</script>
<a id="bannerLink" href="link" target="_self"><img id="bannerImg" style="width: 295px; height: 71px; border-width: 0px" src="plaatje" /></a>
 
GuyM zei:
Klopt hij werkt nu alleen krijg ik na de laatste banner een leeg plaatje te zien en daarna begint hij weer bij 1 ik heb 3 banners en hij denk dat hij een vierde moet plaatsen maar hij moet eigenlijk bij 1 weer beginnen

<script>
//<![CDATA[

window.setInterval('updateBanner();',3000);

var bannerImages = new Array(
"plaatje",
"plaatje",
"plaatje"
)

var bannerUrls = new Array(
"link",
"link",
"link"
)

var bannerTargets = new Array(
"_self",
"_blank",
"_blank"
)

var currentBanner = 0;

function updateBanner()
{
if (!this.link)
this.link = document.getElementById("bannerLink");
if (!this.img)
this.img = document.getElementById("bannerImg");

if (currentBanner++ >= bannerImages.length)
currentBanner = 0;

this.link.href = bannerUrls[currentBanner];
this.link.target = bannerTargets[currentBanner];
this.img.src = bannerImages[currentBanner];
}
//]]>
</script>
<a id="bannerLink" href="link" target="_self"><img id="bannerImg" style="width: 295px; height: 71px; border-width: 0px" src="plaatje" /></a>
Klik om te vergroten...


Hoe is het mogelijk dat in deze code hij er steeds een undefined image achterplakt terwijl deze niet aangegeven wordt?
 
In mijn vorige berichtje zei ik al, je moet niet dit doen:

Code: 
if (currentBanner++ >= bannerImages.length)
  currentBanner = 0;

maar dit:
Code: 
currentBanner++;
if (currentBanner >= bannerImages.length)
  currentBanner = 0;
 
Glest zei:
In mijn vorige berichtje zei ik al, je moet niet dit doen:

Code: 
if (currentBanner++ >= bannerImages.length)
  currentBanner = 0;

maar dit:
Code: 
currentBanner++;
if (currentBanner >= bannerImages.length)
  currentBanner = 0;
Klik om te vergroten...

Beste Glest,

Ik heb het volgende probleem dat hij de rotatie in internet explorer op een aantal pagina's wel pakt en een aantal niet in IE 7 in mozilla werkt alles wel. weet jij misschien hoe dit komt.

Alvast bedankt
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan