我查看了多个代码,它们都远未加权。我正在使用一个非常简单的 fadeIn() fadeOut() JQuery 代码来显示标题的元素列表。
<li>Story 1</li>
<li>Story 2</li>
<li>Story 3</li>
<li>Story 4</li>
<li>Story 5</li>
我查看了下一个函数,但我不知道如何让它显示我想要的元素。所以我追求一些非常简单的东西。它所需要的只是一个循环淡出和淡入的间隔。
我做了一个非常简单的推子,重量很轻。将其用于图像,但将其更改为 div:
脚本
var aniSpd01 = 1000;
var fadeSpd01 = 1000;
$(function() {
var startIndex = 0;
var endIndex = $('#aniHolder div').length;
$('#aniHolder div:first').fadeIn(fadeSpd01);
window.setInterval(function() {
$('#aniHolder div:eq(' + startIndex + ')').delay(fadeSpd01).fadeOut(fadeSpd01);
startIndex++;
$('#aniHolder div:eq(' + startIndex + ')').fadeIn(fadeSpd01);
if (endIndex == startIndex) startIndex = 0;
}, aniSpd01);
});
HTML
<div id="aniHolder">
<div>Story 1</div>
<div>Story 2</div>
<div>Story 3</div>
</div>
CSS
#aniHolder {width:640px; height:480px; }
#aniHolder div {position:absolute; width:640px; height:480px; display:none;}
试试 jquery Cycle插件;我用它来创建一组简单的旋转文本链接,如果你只想要基本的功能和效果,有一个“lite-min”版本可以让它保持美观和精简。
未经测试。这只是将链接在一起的淡出/淡入重新安排在当前元素完成后的下一个元素上。
function fadeTicker( $collection, $elem, interval )
{
var $next = $collection.eq(($collection.index($elem) + 1) % $collection.length));
$(elem).fadeOut( function() {
$(next).fadeIn( function() {
setTimeout( function() {
fadeTicker( $collection, $next, interval );
},
interval
);
});
);
);
用作:
$(function() {
fadeTicker( $('li'), $('li:first'), 5000 );
}
jQuery WebTicker也是旋转文本链接的一个很好的替代方案;同时让您完全控制旋转方向和速度;它还允许使用 CSS 灵活地调整颜色和大小。自动收报机允许不间断的旋转,一旦你到达最后一个项目,第一个项目将立即开始。