Can I suggest two things: 1) put this in mooshell, so that others can edit it 2) check out this plugin:
http://www.clientcide.com/wiki/cnet-libraries/08-layout/04-simpleslideshow#simpleslideshow.carousel source: http://github.com/anutron/clientcide/blob/master/Source/Layout/SimpleSlideShow.js On Fri, Jan 8, 2010 at 9:31 AM, reddrumhead <[email protected]> wrote: > I have created a horizontally scrolling "slideshow" of sorts using > Fx.Scroll. When you click "RIGHT" it should scroll right until it > reaches the last element in the container (which is "SIX"), at which > point it should scroll back to element "ONE". > > Unfortunately, when "RIGHT" is clicked the first time, it scrolls to > "TWO" which is correct. But then when you click it again, it does > nothing. Click it a third time it scrolls to "THREE". Fourth time does > nothing. Fifth time, it scrolls to "FOUR". Finally, clicking it for > the sixth time, it scrolls back to "ONE". > > It would appear that the scroll is only working on every second click. > > I'm stumped. I would really appreciate any insight anyone can offer, > Thanks! > > Live demo is at: http://kineticdesignlabs.com/test/ > > HTML: > <div class="boxes"> > <div class="wrapper"> > <div class="left" style="margin-right: 20px;"> > <!-- <a href="" > id="go-left">LEFT</a><br><br> --> > <a href="" id="go-right">RIGHT</a> > </div> > > <div id="box-container"> > <div class="box-wrapper"> > <div class="box" id="1">ONE</div> > <div class="box" id="2">TWO</div> > <div class="box" id="3">THREE</div> > <div class="box" id="4">FOUR</div> > <div class="box" id="5">FIVE</div> > <div class="box" id="6">SIX</div> > </div> > <div class="cleaner"></div> > </div> > <div class="cleaner"></div> > </div> <!-- close wrapper --> > </div> <!-- close boxes --> > > CSS: > .boxes{ > width: 100%; > height: 390px; > background-color: #fff; > margin: 0; > } > > .wrapper{ > width: 960px; > position: relative; > left: 50%; > margin-left: -480px; > } > > #box-container{ > width: 860px; > height: 390px; > overflow: hidden; > margin-right: 20px; > } > > .box-wrapper{ > width: 20000px; > height: 390px; > } > > .box-wrapper .box{ > width: 880px; > height: 390px; > float: left; > display: inline; > background: #ccc; > border: 1px solid #ddd; > } > > .left{ > float: left; > } > > .right{ > float: right; > margin-left: 20px; > } > > .cleaner{ > clear: both; > height: 0px; > font-size: 0px; > border: none; > margin:0px; > padding: 0px; > background:transparent; > } > > JAVACRIPT: > window.addEvent('domready', function(){ > var currentBox = 0; > var boxArray = $$('#box-container > .box-wrapper').getElements > ('div'); > > var scrollBox = function(dir){ > if(dir == 'right'){ > currentBox++; > }else{ > currentBox--; > } > > var boxScroll = new > Fx.Scroll('box-container',{ > duration: 500, > transition: > Fx.Transitions.Sine.easeOut, > wheelStops: false, > onStart: function(){ > }, > onComplete: function(){ > } > }); > > if(currentBox == > boxArray[0].length){ > currentBox = 0; > boxScroll.toLeft(); > }else if(currentBox <= 0 && dir == > 'left'){ > currentBox = > boxArray[0].length - 1; > > boxScroll.toElement(boxArray[0][boxArray[0].length - 1]); > }else{ > > boxScroll.toElement(boxArray[0][currentBox]); > } > } > > $('go-right').addEvent('click', function(e){ > e.stop(); > scrollBox('right'); > }); > > /* > $('go-left').addEvent('click', function > (e){ > e.stop(); > scrollBox('left'); > }); > */ > }); >
