每隔x秒/分钟轮换小部件或内容块

时间:2012-04-02 作者:rhand

有没有办法用Flash横幅旋转小部件或文本块?我有一个小部件加载了由wordTube Flash和YouTube player加载的Flash视频。客户希望将此视频与一些Flash文本一起旋转(效果显示键入的文本)。我用jQuery替换了Flash文本横幅Tickertype 插件-更好的SEO-我尝试了Datafeedr 交替加载。它允许您在每个广告组的几个广告中添加html和Flash。但我意识到插件只会在页面刷新时旋转广告。有没有每x秒或分钟旋转(ad)块的插件?

Update 1

我正在测试http://wordpress.org/extend/plugins/randomtext/ , 但它似乎并没有旋转,即使我并没有运行缓存插件。

Update 2

jQuery打开jQuery howto Blog 看起来很有希望,但它从文件中获取内容,而不是从不同的HTML元素中获取内容。

Update 3

正在检查http://forums.asp.net/t/1777232.aspx/1?Fade+In+Out+between+two+divs 对于jQueryanimate() 使用“setTimeout”andfadeIn()andfadeOut()`这对我来说都是新鲜事,我想知道我是否可以合并这个Tickertype。

Update 4

我添加了一些jQuery来旋转两个div,但我似乎无法保持用于旋转这两个div的固定大小的文本小部件。以下是基本插件:

$(document).ready(function () {
        fadeIn_();
    })

    function fadeIn_() {
        $(\'#flash\').fadeIn(2000,
        function () {
            setTimeout("$(\'#flash\').fadeOut(2500); fadeOut_();", 6000);
        })
    }

    function fadeOut_() {
        $(\'#ticker-area\').fadeIn(2000,
        function () {
            setTimeout("$(\'#ticker-area\').fadeOut(2500); fadeIn_();", 6000);
        })
    }
这是文本小部件中的HTML和CSS:

<div id="flash-rotate"><div id="flash"><object width="560" height="315" type="application/x-shockwave-flash" id="WT1" name="WT1" data="http://elc.imagewize.com/wp-content/uploads/player.swf"><param name="wmode" value="opaque"><param name="allowscriptaccess" value="always"><param name="allownetworking" value="all"><param name="flashvars" value="file=path/to/file.flv&volume=80&bufferlength=5&quality=false&logo.hide=false&image=http%3A%2F%2Fdomain.com%2Fwp-content%2Fuploads%2F2012%2F02%2Fsteve-martin-thumb.png&title=Steve%20Martin%20learning%20English&linktarget=_self"></object>
</div>
<div id="ticker-area">
  <ul>
    <li>Sed venenatis <a href="http://www.google.com">diam quis</a> lorem. Curabitur.</li>
    <li>Fusce <strong>vehicula</strong> iaculis felis. Phasellus congue!</li>
    <li>Morbi vitae enim vel <em>purus sollicitudin</em>.</li>
  </ul>
</div>
</div>
CSS:

#home-top-row .widget_text {margin-top: 50px;}

#ticker-area{
    width:320px;
    height:240px;
    padding: 10px 0;
    margin: 20px 0;
    font-size: 1.5em;
    font-weight: normal;
    color: #060;
}

/*Flash and TickerType*/

#flash-rotate, #text-5{
    width:320px;
    height:240px;
}

Update 5

修改了CSS背景和尺寸,现在一切都好了!

1 个回复
最合适的回答,由SO网友:rhand 整理而成

所有细节都添加到问题本身。我使用jQuery插件加载一个div,然后加载另一个div。通过向函数添加以下代码,将添加到问题的脚本加载到主题中。php:

function load_home_rotator() {
        wp_enqueue_script(\'rotator\', get_stylesheet_directory_uri() . \'/js/rotator.js\');
  }
add_action(\'template_redirect\', \'load_home_rotator\' );
jQuery本身是由WP加载的,所以不需要加载它。我使用fadein和fadeout for effects+setTimeout来旋转我添加到WordPress文本小部件中的这些div。现在一切都很顺利。

结束

相关推荐

Using tabs in admin widgets

更新:我应该指出,我在插件/主题选项页面上测试了下面的方法,效果非常好。事实上,我还能够包括jQuery cookie插件,以保留页面加载之间的当前选项卡选择(很好!)。当您有多个小部件选项时,尝试向管理小部件添加选项卡以减少表单占用空间。我正在使用WordPress附带的jQuery UI选项卡。以下是我迄今为止在插件中编写的代码。http://pastebin.com/fe4wdBcp当小部件被拖动到小部件区域时,选项卡似乎呈现为OK,但您无法单击查看第二个选项卡。更糟糕的是,如果刷新窗口小部件页面,