?
Solved

Javascript banner rotation

Posted on 2008-10-25
6
Medium Priority
?
403 Views
Last Modified: 2012-05-05
I use the javascript below to rotate some banners.  I works fine, I just want to provide nav btns/links to stop the rotation, click to a specific banner and restart the rotation.

Thanks,
WD
<script type=text/javascript>
var _banners = new Array();
function addBanner(_bannerHTML){
  _banners[_banners.length?_banners.length:0]=_bannerHTML;
}
addBanner("<a href='contact_us.asp?Subject=Catalogue Request'><img border=0 alt='Request a Catalogue' src='images/banners/1.jpg'></a>");
addBanner("<a href='gallery_blurb.asp?catid=138'><img border=0 alt='Tanzanite Collection' src='images/banners/2.jpg'></a>");
addBanner("<a href='staffers.asp?catid=138'><img border=0 alt='Meet the Staff' src='images/banners/3.jpg'></a>");
 
var div2 = new NewDiv2(window, "banner", _banners[0],0,0,50,50,500,"ABSOLUTE");
var count=0; /* which one to start with */
function doIt() {
count++;
count%=_banners.length;
div2.setBody(_banners[count]);
}
setInterval('doIt()',10000);
</script>

Open in new window

0
Comment
Question by:webdork
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 16

Expert Comment

by:sh0e
ID: 22805857

<script type=text/javascript>
var _banners = new Array();
function addBanner(_bannerHTML){
  _banners[_banners.length?_banners.length:0]=_bannerHTML;
}
addBanner("<a href='contact_us.asp?Subject=Catalogue Request'><img border=0 alt='Request a Catalogue' src='images/banners/1.jpg'></a>");
addBanner("<a href='gallery_blurb.asp?catid=138'><img border=0 alt='Tanzanite Collection' src='images/banners/2.jpg'></a>");
addBanner("<a href='staffers.asp?catid=138'><img border=0 alt='Meet the Staff' src='images/banners/3.jpg'></a>");
 
var div2 = new NewDiv2(window, "banner", _banners[0],0,0,50,50,500,"ABSOLUTE");
var count=0; /* which one to start with */
function doIt() {
count++;
count%=_banners.length;
div2.setBody(_banners[count]);
}
var si = setInterval('doIt()',10000);
 
function restartBanner(start){
clearInterval(si);
count=start;
si = setInterval('doIt()',10000);
}
</script>
<input type="button" onClick="restartBanner(1)" value="Restart at position 1"></input>

Open in new window

0
 

Author Comment

by:webdork
ID: 22807560
Nothing happens
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22808065
Need more details.  Does the button not do anything?  Did you copy and paste the code?
I implemented the code as a working page and found no problems.

<script type=text/javascript>
var _banners = new Array();
var divid; var si;
var count=0;
 
function addBanner(_bannerHTML){
  _banners[_banners.length?_banners.length:0]=_bannerHTML;
}
addBanner("<a href='contact_us.asp?Subject=Catalogue Request'><img border=0 alt='Request a Catalogue' src='images/banners/1.jpg'></a>");
addBanner("<a href='gallery_blurb.asp?catid=138'><img border=0 alt='Tanzanite Collection' src='images/banners/2.jpg'></a>");
addBanner("<a href='staffers.asp?catid=138'><img border=0 alt='Meet the Staff' src='images/banners/3.jpg'></a>");
 
function doIt() {
count%=_banners.length;
divid.innerHTML=_banners[count];
count++;
}
 
function loads(){
divid = document.getElementById('div2');
doIt();
si = setInterval('doIt()',1000);
}
 
function restartBanner(start){
clearInterval(si);
count=start;
doIt();
si = setInterval('doIt()',1000);
}
</script>
 
<body onload="loads()">
<input type="text" value="1" id="input1"></input>
<input type="button" onClick="restartBanner(document.getElementById('input1').value)" value="Restart at position (starts at 0 index)"></input>
<div id='div2'></div>
</body>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:webdork
ID: 22808186
Yeah Ok now it works. And I can see how to make links to each individual banner.  Can you add a start and stop?

Thanks,

WD
0
 
LVL 16

Accepted Solution

by:
sh0e earned 2000 total points
ID: 22808450

<script type=text/javascript>
var _banners = new Array();
var divid; var si;
var count=0;
 
function addBanner(_bannerHTML){
  _banners[_banners.length?_banners.length:0]=_bannerHTML;
}
addBanner("<a href='contact_us.asp?Subject=Catalogue Request'><img border=0 alt='Request a Catalogue' src='images/banners/1.jpg'></a>");
addBanner("<a href='gallery_blurb.asp?catid=138'><img border=0 alt='Tanzanite Collection' src='images/banners/2.jpg'></a>");
addBanner("<a href='staffers.asp?catid=138'><img border=0 alt='Meet the Staff' src='images/banners/3.jpg'></a>");
 
function doIt() {
count%=_banners.length;
divid.innerHTML=_banners[count];
count++;
}
 
function startBanner(){
divid = document.getElementById('div2');
doIt();
si = setInterval('doIt()',1000);
}
 
function stopBanner(){
clearInterval(si);
}
 
function restartBanner(start){
stopBanner();
setBanner(start);
startBanner();
}
 
function setBanner(start){
count=start;
}
 
function clearBanner(){
divid.innerHTML='';
}
 
 
</script>
 
<body onload="startBanner()">
<input type="text" value="1" id="input1"></input>
<input type="button" onClick="restartBanner(document.getElementById('input1').value)" value="Restart at position (starts at 0 index)"></input>
<input type="button" onClick="startBanner();" value="Start"></input>
<input type="button" onClick="stopBanner();" value="Stop"></input>
<input type="button" onClick="clearBanner();" value="Clear"></input>
<div id='div2'></div>
</body>

Open in new window

0
 

Author Closing Comment

by:webdork
ID: 31510032
You're the man.

Thanks
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question