Question

我正在尝试创建一个新闻滚动条，它可以从其他网站获得它的头条新闻。如果我硬编码这样的新项目，一切都很好：

<div id="featured" style="border-bottom: 1px solid #E1DAC0; border-top: 1px solid #E1DAC0;">
    <div class="newsitem"><div class="newsthumb">
        <a href="http://touch.nihe.gov.uk/news-newpagechristmas_spirit_breaks_down_interface_barriers">
            <img src="http://touch.nihe.gov.uk/thumbnail-xmas_market-jpg-20618-1-1-0.gif" height="63" width="87" alt="Christmas spirit breaks down interface barriers" />
        </a>
    </div>
    <h2><a href="news-newpagechristmas_spirit_breaks_down_interface_barriers" title="">Christmas spirit breaks down interface barriers</a></h2>
    <div class="newsdate">4 Nov 2014</div>
</div>
<div class="newsitem">
    <div class="newsthumb">
        <a href="http://touch.nihe.gov.uk/news-dispelling-myths-in-east-belfast">
            <img src="http://touch.nihe.gov.uk/thumbnail-east_belfast_racism_seminar_i-jpg-20587-1-1-0.gif" height="63" width="87" alt="East Belfast racism seminar" />
        </a>
    </div>
    <h2><a href="news-dispelling-myths-in-east-belfast" title="Housing Executive dealing with the myths about racism in east Belfast">Dispelling myths in East Belfast</a></h2>
    <div class="newsdate">27 Oct 2014</div>
</div>
<div class="newsitem">
    <div class="newsthumb">
        <a href="http://touch.nihe.gov.uk/news-junior-wardens-back-on-the-city-streets">
            <img src="http://touch.nihe.gov.uk/thumbnail-newbuildings_primary_school_junior_wardens-jpg-20557-1-1-0.gif" height="63" width="87" alt="Newbuildings Primary School Junior Wardens" />
        </a>
    </div>
    <h2><a href="news-junior-wardens-back-on-the-city-streets" title="Our Junior Warden project has started again in local primary schools in Derry-Londonderry. ">Junior Wardens back on the city streets</a></h2>
    <div class="newsdate">22 Oct 2014</div>
</div>
<div class="newsitem">
    <div class="newsthumb">
        <a href="http://touch.nihe.gov.uk/news-the-railway-runs-again-at-strule-and-centenary">
            <img src="http://touch.nihe.gov.uk/thumbnail-omagh_strule_train_mural-jpg-20499-1-1-0.gif" height="63" width="87" alt="Omagh Strule train mural" />
        </a>
    </div>
    <h2><a href="news-the-railway-runs-again-at-strule-and-centenary" title="Local people, events and images have been combined to create a new entrance feature at Strule Park and Centenary Park.">The railway runs again at Strule and Centenary</a></h2>
    <div class="newsdate">16 Oct 2014</div>
</div>
</div>

使用以下方式完成滚动：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="http://touch.nihe.gov.uk/jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#featured").cycle({cleartype: false, easing: 'easeInOutQuad', 
            fx: 'scrollDown', speed: 3500, speedIn: 1000, speedOut: 1000 });
    });

    window.onload = function initialLoad() {
        document.getElementById("page-inner");
        window.scrollTo(0, 1);
    }
    window.onerror = function () { return true };

当我注释掉newitems，并使用这个javascript函数来获取新闻项时，滚动条不起作用，并且这四个项目一起显示：

    var pageRequest = new XMLHttpRequest();
    pageRequest.open("GET", "http://touch.nihe.gov.uk/", false);
    pageRequest.send();
    var pageSourceCode = pageRequest.responseText;
    var n = pageSourceCode.indexOf('<div id="featured">');
    var n2 = pageSourceCode.indexOf('<div id="pager"></div>');
    var extract = pageSourceCode.substring(n, n2);
    extract = extract.replaceAll('href="', 'href="http://touch.nihe.gov.uk/');
    extract = extract.replaceAll('src="', 'src="http://touch.nihe.gov.uk/');
    featured.innerHTML = extract;

新功能正确消失并获取div id =＆＃34; features＆＃34;中的所有HTML。它正确地替换了当前页面上的div。它只是没有做滚动。

当我使用FireBox使用FireFox运行时，我在控制台上收到以下错误：Cross-Origin Request Blocked：同源策略禁止在touch.nihe.gov.uk上读取远程资源。这可以通过将资源移动到同一域或启用CORS来解决。

另一方面，在IE中运行，该控制台显示以下消息：[循环]终止;太少的幻灯片：1。在新的div被复制之前，是否以某种方式获得幻灯片的数量？

有什么想法吗？

Answer 1

您可以尝试在XMLHttpRequest之后重新启动循环：

var pageRequest = new XMLHttpRequest();
    pageRequest.open("GET", "http://touch.nihe.gov.uk/", false);
    pageRequest.send();
    var pageSourceCode = pageRequest.responseText;
    var n = pageSourceCode.indexOf('<div id="featured">');
    var n2 = pageSourceCode.indexOf('<div id="pager"></div>');
    var extract = pageSourceCode.substring(n+21, n2);
    extract = extract.replaceAll('href="', 'href="http://touch.nihe.gov.uk/');
    extract = extract.replaceAll('src="', 'src="http://touch.nihe.gov.uk/');
    featured.innerHTML = extract;
    $("#featured").cycle({ cleartype: false, easing: 'easeInOutQuad', fx: 'scrollDown', speed: 3500, speedIn: 1000, speedOut: 1000 });

新的Scroller - 使用javascript替换div后不滚动

1 个答案: