side scroll mac style

[pixelprofusion]

hei,

noen som kjenner til et script som kan gjøre dette på en ikke altfor
komplisert måte


på forhånd tusen takk

[Tonedefeat]

Kode: Merk alt

var s_code=s.t();if(s_code)document.write(s_code)//--></script>
<!-- End SiteCatalyst code version: H.8. -->

   <div id="container">
      <div id="main">
         <div id="productbrowser">
            <div id="pb-productbrowsercontainer">
               <ul id="pb-productslider">
                  <li class="pb-productimage" id="pb-airportexpress"><a href="/airportexpress/">AirPort Express</a></li>
                  <li class="pb-productimage" id="pb-airportextreme"><a href="/airportextreme/">AirPort Extreme</a></li>
                  <li class="pb-productimage" id="pb-timecapsule"><a href="/timecapsule/">Time Capsule</a></li>
                  <li class="pb-productimage" id="pb-keyboards"><a href="/keyboard/">Keyboard</a></li>
                  <li class="pb-productimage" id="pb-mightymouse"><a href="/mightymouse/">Mighty Mouse</a></li>   
                  <li class="pb-productimage" id="pb-displays"><a href="/displays/">Cinema Displays</a></li>
                  <li class="pb-productimage" id="pb-macpro"><a href="/macpro/">Mac Pro</a></li>
                  <li class="pb-productimage" id="pb-macmini"><a href="/macmini/">Mac mini</a></li>
                  <li class="pb-productimage" id="pb-macbook"><a href="/macbook/">MacBook</a></li>
                  <li class="pb-productimage" id="pb-macbookair"><a href="/macbookair/">MacBook Air</a></li>
                  <li class="pb-productimage" id="pb-macbookpro"><a href="/macbookpro/">MacBook Pro</a></li>
                  <li class="pb-productimage" id="pb-imac"><a href="/imac/">iMac</a></li>
                  <li class="pb-productimage" id="pb-macosx"><a href="/macosx/">Mac OS X</a></li>
                  <li class="pb-productimage" id="pb-ilife"><a href="/ilife/">iLife</a></li>
                  <li class="pb-productimage" id="pb-dotmac"><a href="http://www.mac.com/">.Mac</a></li>
                  <li class="pb-productimage" id="pb-iwork"><a href="/iwork/">iWork</a></li>
                  <li class="pb-productimage" id="pb-quicktime"><a href="/quicktime/">QuickTime</a></li>
                  <li class="pb-productimage" id="pb-aperture"><a href="/aperture/">Aperture</a></li>
                  <li class="pb-productimage" id="pb-finalcut"><a href="/finalcutstudio/">Final Cut Studio</a></li>
                  <li class="pb-productimage" id="pb-finalcutexpress"><a href="/finalcutexpress/">Final Cut Express</a></li>
                  <li class="pb-productimage" id="pb-logicstudio"><a href="/logicstudio/">Logic Studio</a></li>
                  <li class="pb-productimage" id="pb-logicexpress"><a href="/logicexpress/">Logic Express</a></li>
                  <li class="pb-productimage" id="pb-shake"><a href="/shake/">Shake</a></li>
                  <li class="pb-productimage" id="pb-ard"><a href="/remotedesktop/">Apple Remote Desktop</a></li>
                  <li class="pb-productimage" id="pb-xserve"><a href="/xserve/">Xserve</a></li>
                  <li class="pb-productimage" id="pb-xserveraid"><a href="/xserve/raid/">Xserve RAID</a></li>
                  <li class="pb-productimage" id="pb-xsan"><a href="/xsan/">Xsan</a></li>
                  <li class="pb-productimage" id="pb-macosxserver"><a href="/server/macosx/">Mac OS X Server</a></li>
               </ul>
               <div id="pb-productslidertrack">
                  <div id="pb-productsliderhandle"></div>
                  <div id="pb-productsliderhandleimage"></div>
                  <span id="pb-cat1">Wi-Fi</span>
                  <span id="pb-cat2">Accessories</span>
                  <span id="pb-cat3">Macs</span>
                  <span id="pb-cat4">Applications</span>
                  <span id="pb-cat5">Servers</span>
               </div>
               <div id="pb-leftarrow"></div>
               <div id="pb-rightarrow"></div>
            </div>
         </div><!--/productbrowser-->

Vet ikke om det hjelper så mye, men koden ser sånn ut.. Sikkert helt urelevant info, menmen

[decodex]

Prinsippet er ikke så vanskelig. Jeg satte sammen et veldig kjapt eksempel basert på YUI som kjernebibliotek: Produktkarusell

Mye som kunne vært forbedret her og finpusset, men det er et fungerende eksempel på hvordan det kan gjøres.

Jeg skal se å få lagt til litt kommentarer også så det blir lettere å forstå hva som skjer Lot både JavaScript og CSS ligge direkte i HTML ettersom det er så godt som kun det som trengs for et fungerende eksempel.

Edit: Lagt til kommentarer i koden, gjort den litt mer uavhengig av CSS og lagt til enkel støtte for scrollwheel på mus.