Javascript div滚动的无限循环
我正在尝试在上实现tweet滚动条 我猜这就是使用推特滚动条的原因 但由于演示不起作用,此链接被中断 我在寻找替代品 我发现 HTML:Javascript div滚动的无限循环,javascript,jquery,css,jquery-plugins,Javascript,Jquery,Css,Jquery Plugins,我正在尝试在上实现tweet滚动条 我猜这就是使用推特滚动条的原因 但由于演示不起作用,此链接被中断 我在寻找替代品 我发现 HTML: <ul class="slide"> <li><img src="http://www.google.com/logos/2010/canadianthanksgiving2010-hp.jpg"/></li> <li><img src="http://www.google.com/lo
<ul class="slide">
<li><img src="http://www.google.com/logos/2010/canadianthanksgiving2010-hp.jpg"/></li>
<li><img src="http://www.google.com/logos/2010/germany10-hp.gif"/></li>
<li><img src="http://www.google.com/logos/stpatricks_02.gif"/></li>
</ul>
JS:
我做了一点修改,效果很好
唯一的问题是它在每个div被滚动后停止
我希望它是无限的卷轴一样的效果,而不让它停止。就像hubspot一样。您应该使用另一种JQuery放松方法,而不是swing。
看看JQuery网站上的广告:FYI演示不起作用,因为Twitter API v1不再起作用。他们升级到API v1.1。放松的变化将影响div流量。我试着放松:“线性”,它有恒定的速度,但当动画结束时它仍然停止。
ul.slide{margin:0;
padding:0;
height:80px;
list-style-type:none;}
ul.slide li{float:left;
list-style-type:none;}
ul.slide img{border:1px solid silver;
height:80px;}
//Plugin start
(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var _this = $(this);
_this.data('marquee', options);
var _li = $('>li', _this);
_this.wrap('<div class="slide_container"></div>')
.height(_this.height())
.hover(function () {
if ($(this).data('marquee').stop) {
$(this).stop(true, false);
}
},
function () {
if ($(this).data('marquee').stop) {
$(this).marquee('slide');
}
})
.parent()
.css({
position: 'relative',
overflow: 'hidden',
'height': $('>li', _this).height()
})
.find('>ul')
.css({
width: screen.width * 2,
position: 'absolute'
});
for (var i = 0; i < Math.ceil((screen.width * 3) / _this.width()); ++i) {
_this.append(_li.clone());
}
_this.marquee('slide');
});
},
slide: function () {
var $this = this;
$this.animate({
'left': $('>li', $this).width() * -1
},
$this.data('marquee').duration,
'swing',
function () {
$this.css('left', 0).append($('>li:first', $this));
$this.delay($this.data('marquee').delay).marquee('slide');
}
);
}
};
$.fn.marquee = function (m) {
var settings = {
'delay': 2000,
'duration': 900,
'stop': true
};
if (typeof m === 'object' || !m) {
if (m) {
$.extend(settings, m);
}
return methods.init.apply(this, [settings]);
} else {
return methods[m].apply(this);
}
};
})(jQuery);
//Plugin end
//call
$(document).ready(
function () {
$('.slide').marquee({
delay: 3000
});
}
);