Javascript 很难让旋转器按我需要的方式工作

我已经在这个微调器控件上工作了几天，虽然我没有太多的运气让它按我需要的方式工作。它最初是我在别处找到的代码，并根据我自己的需要重新调整了用途——所以我有点不知所措

HTML:

<ul class="picker">
    <li class="pickerItem"><span class="value">1st Item Test</span></li>
    <li class="pickerItem"><span class="value">2nd Item Test</span></li>
    <li class="pickerItem"><span class="value">3rd Item Test</span></li>
    <li class="pickerItem win"><span class="value">4th Item Test</span></li>
    <li class="pickerItem"><span class="value">5th Item Test</span></li>
    <li class="pickerItem"><span class="value">6th Item Test</span></li>
    <li class="pickerItem"><span class="value">7th Item Test</span></li>
    <li class="pickerItem"><span class="value">8th Item Test</span></li>
    <li class="pickerItem"><span class="value">9th Item Test</span></li>
    <li class="pickerItem"><span class="value">10th Item Test</span></li>
    <li class="pickerItem last"><span class="value">11th Item Test</span></li>
</ul>
<div class="clear"></div>
<p><a href="#" id="start">start</a></p>
<p>Position: <span id="position">0</span></p>
<p>Speed: <span id="speed">0</span></p>
<p>Deceleration: <span id="deceleration">0</span></p>

第一项测试
第二项测试
第三项测试
第四项测试
第五项测试
第六项测试
第7项测试
第八项测试
第9项测试
第10项测试
第11项测试


职位：0

速度：0

减速度：0

Javascript:

var marqueeRunning = false;
var winElement;
var fullSpeed = 60;
var speed = fullSpeed;
var deceleration = 3;
var rotationTotal = 10;
var currentRotation = 0;

$(document).ready(function() {

winElement = $(".pickerItem.win");
$(".pickerItem").last().addClass("last");
$(".picker").each(function() {
    var i = 0;
    $(this).find(".pickerItem").each(function() {
        var $this = $(this);
        $this.css("top", i);
        i += $this.height();
    });
});

$('#start').click(function() {
    if (!marqueeRunning) {
        speed = fullSpeed;
        $("#speed").html(speed);
        //marqueeRunning = true;                
        var countScrolls = $('.picker .pickerItem').length;

        marqueeRunning = true;
        for (var i = 0; i < countScrolls; i++) {
            doScroll($('.picker .pickerItem:nth-child(' + i + ')'));
        }

        setTimeout
        (
            function()
            {
                marqueeRunning = false;
            }, 
            1000
        );
    }
});
});

function slowDown()
{
var currentTop = Math.floor(winElement.css("top").replace("px",""));
/* -- Bounce Effect
if (currentTop != 0)
{
    newSpeed = speed;
    if (Math.abs(currentTop) < Math.abs(speed *4)) newSpeed = Math.floor(Math.abs(speed) - deceleration);
    if (newSpeed === 0)
    {
        newSpeed = speed;
    }
    if (currentTop > 0)
    {
       speed = Math.floor(Math.abs(newSpeed));
    }
    else
    {
       speed = -Math.floor(Math.abs(newSpeed));
    }
    if (Math.abs(currentTop) < 3 && Math.abs(speed) === 3) speed = currentTop;
}
*/
$("#speed").html(speed);
if (currentTop === 0)
{
    speed = 0;
    $("#speed").html(speed + " (complete)");
}
}

function doScroll($ele) {
//alert($ele.css("top"));
var top = parseInt($ele.css("top"));
//console.log(' Outside - ' + top + ' < -' + 3*fullSpeed);

if (top < -(3 * fullSpeed)) { //bit arbitrary!
//console.log(' Inside - ' + top + ' < -' + 3*fullSpeed);
    var $lastEle = $ele.closest('.picker').find(".last");
    $lastEle.removeClass("last");
    $ele.addClass("last");
    var top = (parseInt($lastEle.css("top")) + $lastEle.height());
    $ele.css("top", top);
}
$ele.animate({
    top: (parseInt(top) - speed)
}, 100, 'linear', function() {
    $("#position").html(winElement.css("top"));
    if ($ele.get(0) === winElement.get(0) && marqueeRunning === false) setTimeout(slowDown, 10);
    if (marqueeRunning || (Math.floor(winElement.css("top").replace("px","")) !== 0 && speed !== 0)) doScroll($(this))
});
 }

var marqueeRunning=false；
var-winElement；
var全速=60；
var速度=全速；
减速度=3；
var rotationTotal=10；
var currentRotation=0；
$（文档）.ready（函数（）{
winElement=$（“.pickerItem.win”）；
$（“.pickerItem”）.last（）.addClass（“last”）；
$（“.picker”）。每个（函数（）{
var i=0；
$（this.find（“.pickerItem”）.each（function（）{
var$this=$（this）；
$this.css（“top”，i）；
i+=$this.height（）；
});
});
$（“#开始”）。单击（函数（）{
如果（！选框运行）{
速度=全速；
$（“#速度”）.html（速度）；
//选框运行=真；
var countScrolls=$（'.picker.pickerItem'）.length；
选框运行=真；
对于（变量i=0；i0）
{
速度=数学地板（数学abs（新闻速度））；
}
其他的
{
速度=-Math.floor（Math.abs（newSpeed））；
}
如果（数学abs（currentTop）<3&&Math.abs（速度）==3）速度=当前Top；
}
*/
$（“#速度”）.html（速度）；
如果（currentTop==0）
{
速度=0；
$（“#speed”）.html（speed+”（complete）”；
}
}
函数doscorl（$ele）{
//警报（$ele.css（“顶部”））；
var top=parseInt（$ele.css（“top”））；
//console.log（'Outside-'+top+'<-'+3*全速）；
如果（top<-（3*全速））{//位任意！
//console.log（'Inside-'+top+'<-'+3*全速）；
var$lastEle=$ele.closest（“.picker”）.find（“.last”）；
$lastEle.removeClass（“last”）；
$ele.addClass（“最后”）；
var top=（parseInt（$lastEle.css（“top”）+$lastEle.height（））；
$ele.css（“顶部”，顶部）；
}
$ele.animate({
顶部：（parseInt（顶部）-速度）
}，100，'线性'，函数（）{
$（“#position”）.html（winElement.css（“top”）；
if（$ele.get（0）==winElement.get（0）&&marqueeRunning==false）设置超时（减速，10）；
如果（选框运行| | |（Math.floor（winElement.css（“top”）.replace（“px”）和“）！==0和速度！==0））多克罗尔（$（此））
});
}

​ 您可以在此处查看当前版本：

我想做的是让纺纱机旋转，然后在5-6次旋转之后，减速到中间的“Win”类的列表项目。有人能给我指一下正确的方向吗。另外，我也不知道为什么，但它在第一组项目之后就出现了一个缺口，我不知道如何摆脱它

非常感谢您的帮助。

我使用scrollTo创建了无限循环，在滚动窗口和完成滚动到最后一个获奖项目时，我复制了您的项目数：

HTML几乎与您的

CSS:

JS

$.easing.elasout=函数（x、t、b、c、d）{
var s=1.70158；var p=0；var a=c；
if（t==0）返回b；if（（t/=d）==1）返回b+c；if（！p）p=d*0.3；
如果（a

---

初始脚本最大的问题是弄乱了全局范围，并且很难做简单的事情。

应该像：？很多奇怪的代码…差不多-只是稍微居中一点，旋转几圈后。绝对是在正确的方向上…尝试一下很棒！！只是好奇，有没有办法让它慢到正确的速度，而不是停下来“弹跳”？我想你可以为此选择/编写缓解插件，

p {
 padding: 0px;
 margin: 0px;
}
.pickerItem {
 height:60px;
 width:298px;
 color: #000;
 border: 1px solid #ccc;
 text-align: center;
 font-size: 1.2em;
 font-weight: bold;
 list-style: none;
 margin: 0px;
 padding: 0px;
}

.value {
  display: block;
  margin-top: 15px; 
  padding: 0px;
}

.picker {
  margin: 0px;
  height: 220px;
  width:300px;
  border: solid 1px black;
  position: relative;
  overflow: hidden;
  background-image: url(http://i.imgur.com/hMWRu.jpg);
  padding: 0px;
}
.clear {
  clear:both;
}
.win span{
 background:blue; 
}

$.easing.elasout = function(x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t===0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*0.3;
        if (a < Math.abs(c)) { a=c;  s=p/4; }
        else s = p/(2*Math.PI) * Math.asin (c/a);
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    };




$(function() {
  var picker=$('.picker');
  var added_items=picker.children('li').clone(true);
  picker.append(added_items);
  var last=picker.children().last();
  var first=picker.children().first();
  var stop=false;
  var win=$('.picker .win').last();
  var start=function() {
    $(this).unbind('click');
    stop=false;
  scroll();  
    setTimeout(function() {
     stop=true; 
    },1000);
  };
  var scroll=function()   {
    picker.scrollTo(last,500,{ onAfter: nextstep});
  };
  var nextstep=function() {
    if (stop) {
      picker.scrollTo(first);
      picker.scrollTo(win.prev(),2000,{easing: 'elasout'});
      $('#start').click(start);
      return;
    }
    picker.scrollTo(first);
    scroll();

  };
  $('#start').click(start);


});