连续自动滚动div jquery

时间:2013-11-11 09:49:18

标签: jquery

我想要自动滚动,我尝试了以下代码,它运行正常。但我想让卷轴重新开始。

JS:

$(document).ready(function () {
    var containerheight = 0,
        numbercount = 0,
        liheight,
        index = 1,
        timer = null;
    var speed = 75; //px per sec
    var width = $('#vmarquee').outerHeight();
    var curleft = $('#vmarquee').position().top;
    var duration = (width + curleft) * 1000 / speed;
    alert(width);

    function slide() {
        //  var curleft = $('#vmarquee').position().top;
        //  var duration = (width+curleft) * 1000 / speed;

        $("#vmarquee").animate({
            "margin-top": width
        }, duration, function () {

            slide();
        });

        // timer = setTimeout(slide, 2500);
    }

    $("#vmarquee").hover(function () {
        $('#vmarquee').stop();
    }, function () {
        slide();
    });

    slide();
});     

HTML:

<div class="maininstrcbox autoScroller-container" id="myDiv">
<div id="vmarquee" style="height:500px;overflow:hidden;">


<ul id="">

<!--start box-->
<li>
<div class="instrucbox">
<div class="titleboxe">
<h3 class="titleclss">While making DST</h3>
</div>
<div class="boxecont">
<ul class="instrcn">
<li>Did I start planning at least 15 days in advance to make next month dealer strategy template.</li><li>
  Did I align the dealer to  sit with you on making the DST</li>
<li>  Did I put revised targets of  next two months in the DST</li>
<li>  Did I put the updated  outlook of last 3 months</li>
<li>  Did I discuss all the  hygiene issues with the dealer</li>
<li>Did I mention all the activities in the DST</li>
<li>Did I plan enough activities so that the target pipeline can be achieved</li>
</ul>
<div class="clear"></div>
</div>
</div>
</li>
<!--end box-->

<!--start box-->
<li>
<div class="instrucbox">
<div class="titleboxe">
<h3 class="titleclss">While driving CRP-ORP</h3>
</div>
<div class="boxecont">
<ul class="instrcn">
<li>Did I check whether at least 1/3rd of existing customers are active</li>
<li>Did I check when was an existing customer last called by anybody in the dealership, If it is more than 15 days then it is a red sign</li>
<li>Did I check how many customers were called by dealership as per DST plan</li>
<li>Did I check how many S0 received</li>
<li>Did I check if machine demand is increasing in a territory where we already have an existing customer</li>
</ul>
</div>
</div>
</li>
<!--end box-->


<!--start box-->
<li>
<div class="instrucbox">
<div class="titleboxe">
<h3 class="titleclss">While Tracking Competition</h3>
</div>
<div class="boxecont">
<ul class="instrcn">
<li>Did I see last month lost cases</li>
<li>Did I figure out the actual reasons behind lost cases</li>
<li>Did I see DSE wise lost cases</li>
<li>Did I check why our existing customer not informed us about the prospect</li>
<li>Did I track pricing and present deals</li>
<li>Did I check if there is any financier scheme by competition</li>
<li>Did I check if any bulk deal is happening</li>
</ul>
</div>
</div>
</li>
<!--end box-->

<!--start box-->
<li>
<div class="instrucbox">
<div class="titleboxe">
<h3 class="titleclss">While driving eSMS</h3>
</div>
<div class="boxecont">
<ul class="instrcn">
<li>Did I check whether the eSMS portal is updated with all DSE CDSE details</li>
<li>Did I check whether the entry of S5 and S6 cases also being entered into e-SMS</li>
<li>Did I check whether DSE are updating the eSMS for completed activities</li>
<li>Did I check whether the dealer is informing the channel team in case of any mobile device stops working</li>

</ul>
</div>
</div>
</li>
<!--end box-->



</ul>


</div>
</div>

小提琴链接http://jsfiddle.net/wFyWs/15/ 如何在到达终点后重新开始?

谢谢,

1 个答案:

答案 0 :(得分:1)

function slide() {
 //  var curleft = $('#vmarquee').position().top;
  //  var duration = (width+curleft) * 1000 / speed;

    $("#vmarquee").animate({
          "margin-top":  width
    },duration, function() {

        $("#vmarquee").css("margin-top", 0);
        slide();
    });


  // timer = setTimeout(slide, 2500);
}