我想要自动滚动,我尝试了以下代码,它运行正常。但我想让卷轴重新开始。
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/ 如何在到达终点后重新开始?
谢谢,
答案 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);
}