Question

我有以下代码来旋转DIV中的文本内容。它工作正常，但消息是随机显示的，而不是从头到尾按顺序显示，有时甚至会重复两次或更多次

 <script type="text/javascript">
    var textarray = [
        "message one",
        "now message two",
        "last but not least message three"
    ];

    var $ryt=$('#notes');

    function RndText(){
        var rannum=Math.floor(Math.random()*textarray.length);
        $ryt.html(textarray[rannum]).hide().fadeIn('slow');
    }

    onload=function(){
        RndText();
    }

    var inter=setInterval(function(){
        RndText();
    },3000);

</script>

显示文本，旋转和淡入淡出效果在DIV＆＃34; notes＆＃34;中正常工作，唯一的问题是这个math.random不会从头到尾显示数组中的消息。

我对javascript一无所知。整天测试和编辑代码，什么都没有。知道怎么做吗？

Answer 1

查看this fiddle

以下代码可以实现您想要的技巧：

using System.Linq;
using System.Web.Mvc;
using Orchard;
using Orchard.DisplayManagement;
using Orchard.Mvc.Filters;
using Orchard.UI.Admin;

public class MyFilter : FilterProvider, IResultProvider {
    private readonly dynamic _shapeFactory;
    private readonly WorkContext _workContext; 

    public MyFilter(WorkContext workContext, IShapeFactory shapeFactory)
    {
        _workContext = workContext;
        _shapeFactory = shapeFactory;
    }

    public void OnResultExecuting(ResultExecutingContext filterContext)
    {
        // should only run on a full view rendering result
        if (!(filterContext.Result is ViewResult)) return;

        // front end only
        if (AdminFilter.IsApplied(new RequestContext(_workContext.HttpContext, new RouteData()))) return;

        var body = _workContext.Layout.Body;
        body.Add(_shapeFactory.MyShape());
    }

    public void OnResultExecuted(ResultExecutedContext filterContext) {}
}

<强> __ UPDATE __

然后试试这个：

请注意我稍微更改了div定义。

function flash() {
   $( "div" ).show().fadeOut( "slow" );
}

Answer 2

您只需使用jquery函数 fadeIn（）为div设置动画，请参阅 WORKED FIDDLE ：

fadeIn() 方法会逐渐将所选元素的不透明度从隐藏更改为可见（渐弱效果）。
控制动画传递“慢”或“快速”或指示持续时间（以毫秒为单位）以函数的参数。< / p>

完全JS：

setInterval(function(){
    i = i == textArray.length ? 0 : i;   
    $('#notes').text(textArray[i]).hide().fadeIn('slow');
    i++;
},5000);

使用文本数组在DIV中旋转文本的JQuery或Javascript

2 个答案: