如何使用Jquery/JavaScript使此图像滑块在单击时滑动不止一次

How do I make this image slider to slide more than once when clicked, using Jquery/JavaScript?

本文关键字：单击 不止一次 图像 Jquery 何使用 JavaScript      更新时间：2023-09-26

我正在处理以下Jquery/JavaScript片段。

基本上它是一个面向对象的图像滑块。请参阅JSBin上的代码：http://jsbin.com/eloduj/3/edit#html，实时

问题是，当我单击滑块导航控件时，它在每个方向上只滑动一次！由于有4个图像DIV，我如何才能使其正常工作？

任何帮助都将不胜感激，谢谢

答案（在rdcmk的帮助下）分享是关怀

JS-

var cn = {
    hero : function(r,rc,lx,rx){
        rc=$(rc),rcw=rc.width(),rca=rc.size(),rw=rcw*rca;$(r).css({'width':rw});
        $(lx).click(function(){n=$(r).position().left-rcw; $(r).animate({left:(n<-rw+rcw?0:n)+'px'},500);});
        $(rx).click(function(){n=$(r).position().left+rcw; $(r).animate({left:(n>0?-rw+rcw:n)+'px'},500);});
    }
}
$(function(){
    cn.hero('#reel', '#reel div', '#reel-left', '#reel-right');
});

HTML&CSS

* { padding:0; margin:0; outline:none; font-family:Arial, Helvetica, sans-serif; }
#wrap { width:1024px; margin:0 auto; }
#hero { border:1px dashed lime; position:relative; width:1022px; height:304px; overflow:hidden }
#hero #reel { border:1px dashed red; position:absolute; height:302px; left:0; }
#hero #reel div { width: 1018px; height:300px; float:left; }
#reel-controls { position: absolute; z-index:10; }
 <div id="hero">
        <div id="reel">
            <div id="pic1" style="background-color:#C3F"></div>
            <div id="pic2" style="background-color:#0F9"></div>
            <div id="pic3" style="background-color:#999"></div>
            <div id="pic3" style="background-color:#6CC"></div>
        </div>
        <div id="reel-controls">
            <span id="reel-left">left</span>
            <span id="reel-right">right</span>
        </div>
    </div>

我想我明白了：http://jsbin.com/eloduj/14/edit#html，实时

答案很简单。您当前正在执行与x=3等效的操作，而您需要x=x+3。。

做这样的事情（伪代码）

$(leftCtrl).click(function(){
                  var currentLeft = $(reel).offset().left;
                  $(reel).animate({ left: currentLeft-reelChildWidth }, 500 );
        });
        $(rightCtrl).click(function(){
                  var currentlLeft = $(reel).offset().left;
                  $(reel).animate({ left: currentLleft+reelChildWidth }, 500 );

让我知道这是否足够好，或者你是否需要一个运行的例子。

相关文章：