Member Avatar for servantofgod

Anyone know of any flash components or scripts that produce the ad rotator you see in buy.com, with the 1 2 3 4 5 play pause buttons?

  • 3 Contributors
  • 2 Replies
  • 132 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by Jen0608

Dani AI

Generated

asked for the buy.com-style rotator (numbered 1–5 plus play/pause). pointed to a Flash component and liked the look. Important update for anyone reading this years later: Flash is no longer supported in modern browsers, so a Flash-based rotator will break for most visitors. Recreate the same UI using HTML/CSS/JavaScript for broad compatibility, accessibility, and easier analytics.

A simple, resilient pattern:

  • Mark up slides as a list and expose controls as real buttons so keyboard users and screen readers can operate them.
  • Use a single timer for autoplay and toggle it with a play/pause button that updates aria-pressed.
  • Stop autoplay on hover, focus, or when the page is hidden (Page Visibility API).
  • Preload or lazy-load images to avoid layout shifts and wasted bandwidth.

Example skeleton (replace image paths and expand styles as needed):

<div class="rotator" aria-roledescription="carousel">
  <ul class="slides">
    <li class="slide" data-index="0"><img src="ad1.jpg" alt="Ad 1"></li>
    <li class="slide" data-index="1"><img src="ad2.jpg" alt="Ad 2"></li>
    <li class="slide" data-index="2"><img src="ad3.jpg" alt="Ad 3"></li>
  </ul>

  <div class="controls">
    <button class="play" aria-pressed="false">Play</button>
    <div class="nums" role="tablist">
      <button data-index="0">1</button>
      <button data-index="1">2</button>
      <button data-index="2">3</button>
    </div>
  </div>
</div>

<script>
const slides = document.querySelectorAll('.slide');
const nums = document.querySelectorAll('.nums button');
const playBtn = document.querySelector('.play');
let current = 0, timer = null;

function show(n){
  slides.forEach((s,i)=> s.style.display = i===n ? 'block' : 'none');
  nums.forEach(b=> b.classList.toggle('active', +b.dataset.index === n));
  current = n;
}

function next(){ show((current+1) % slides.length); }

function togglePlay(){
  if(timer){ clearInterval(timer); timer = null; playBtn.setAttribute('aria-pressed','false'); playBtn.textContent='Play'; }
  else { timer = setInterval(next,4000); playBtn.setAttribute('aria-pressed','true'); playBtn.textContent='Pause'; }
}

nums.forEach(b => b.addEventListener('click', e => { togglePlay(); show(+e.currentTarget.dataset.index); }));
playBtn.addEventListener('click', togglePlay);
document.addEventListener('visibilitychange', ()=> { if(document.hidden) clearInterval(timer); });
show(0);
</script>

Notes: add keyboard handlers (left/right), ensure images have descriptive alt text, and respect ad-serving rules and analytics (impressions/clicks). If supporting a legacy internal app that still uses Flash, provide a static HTML fallback for modern clients and plan migration to an HTML5-based rotator.

Member Avatar for neviofr

You can try it:

Member Avatar for Jen0608

looks really good. i like this flash thing on my page someday...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.