Question

我正在尝试循环链接表单显示为＆lt; LI>项目。

我的代码看起来或多或少像这样：

<html>
<head>
<style>
ul.tcycle  {list-style-type:none;max-width: 540px; overflow:hidden;}
ul.tcycle li{display: inline;width: 100%;overflow:hidden;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://sdepold.github.io/jquery-rss/src/jquery.rss.js"></script>
<script src="http://malsup.github.io/jquery.tcycle.js"></script>
<script>
  jQuery(function($) {
  $("#rss-feeds").rss("http://news.google.com/?output=rss", {
    limit: 4,
    layoutTemplate: '<ul id=entries class=tcycle data-fx=scroll data-timeout=2000>{entries}</ul>',
    entryTemplate: '<li width=540><a href="{url}" title="{title}" class="url go" rel="bookmark external">{title}</a> </li>'
}).show();
      })
</script>

</head>
<body>

<div id="rss-feeds"></div>

</body>
</html>

项目显示属性，但它们不循环。当手动创建列表时（而不是从jquery-rss创建），循环工作正常。

我在哪里以及我做错了什么？

Answer 1

尝试更改为：

<script>
  $(document).ready(function() {
  $("#rss-feeds").rss("http://news.google.com/?output=rss", {
    limit: 4,
    layoutTemplate: '<ul id="entries" class="tcycle" data-fx="scroll" data-timeout="2000">{entries}</ul>',
    entryTemplate: '<li width:"540"><a href="{url}" title="{title}" class="url go" rel="bookmark external">{title}</a> </li>'
}).show();
      });
</script>

Answer 2

我决定切换到vTicker，感谢Rich Hollis我可以分享以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>test-vticker</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://sdepold.github.io/jquery-rss/src/jquery.rss.js"></script>
    <script src="http://richhollis.github.com/vticker/downloads/jquery.vticker.min.js?v=1.14"></script>

    <script>
      $(function() {
        $("#example-vticker").rss("http://news.google.com/?output=rss", {
          limit: 4,
           entryTemplate: '<li><a href="{url}">{title}</a></li>',
           success: function() {
            $('#example-vticker').vTicker('init', {speed: 400, 
              pause: 1000,
              showItems: 1,
              padding:4});
           }
        });
        $('#next').click(function() { 
          $('#example-vticker').vTicker('next', {animate:false});
        });
        $('#prev').click(function() { 
          $('#example-vticker').vTicker('prev', {animate:false});
        });
      });
    </script>
  </head>
  <body>
    <div id="example-vticker" class="example"></div>
    <button id="prev">Prev</button><button id="next">Next</button>
  </body>
</html>

循环饲料项目标题（jQuery，tCycle，jquery.rss）

2 个答案: