Question

我正在尝试克隆此插件，您在热门故事中看到http://www.veterama-szene.de/。

在Top Story上方的MouseOver上，Story会显示在较大的左侧框中。如果光标不在整个Top Story Box中，则Top Stories会自动更改。

所以我到目前为止编写了脚本，MouseOver函数正常工作。你回顾一下Top Story并将其克隆到更大的左侧框中。但是这种自动更改不起作用。所以请帮我完成这项工作。谢谢。

Jquery的

<script type=\"text/javascript\">
    $(document).ready(function(){
        $('.listnews .newsitem').hover(
            function() {
                $('.bignews').html('');
                $(this).clone().appendTo('.bignews');
                $('.bignews').show();
            }, 
            function() {
                $('.bignews').show();
            }
        ),
        $(function() {
                $('.bignews').html('');
                $('#item1').clone().appendTo('.bignews');
                $('.bignews').show();
            });

    });
</script>

HTML

<table border="0" cellpadding="0" cellspacing="0" class="news">
    <tr>
        <td class="bignews">
        </td>

        <td class="listnews">
        <div class="newsitem" id="item1">
        <div>
        <h4>headline</h4></div>
        <p>text</p>
        </div>
        <div class="newsitem" id="item2">
        <div>
        <h4>headline</h4></div>
        <p>text</p>
        </div>
        <div class="newsitem" id="item3">
        <div>
        <h4>headline</h4></div>
        <p>text</p>
        </div>
        <div class="newsitem" id="item4">
        <div>
        <h4>headline</h4></div>
        <p>text</p>
        </div>
        <div class="newsitem" id="item5">
        <div>   
        <h4>headline</h4></div>
        <p>text</p>
        </div>
        </td>
    </tr>
</table>

Answer 1

有许多方法可以实现这一点，但是，它的要点是让一个调度程序在一个时间间隔内轮换你的新闻项目。当用户将鼠标悬停在某个项目上时，将显示该项目并禁用该计划程序。

我还建议使用某种效果来保持过渡平滑且不那么刺耳。

这是一个过分简化的解决方案，可以帮助您入门

(function() {
    var onReady = function() {
        var newsItems = $('.listnews > .newsitem');
        var bigNews = $('.bignews');
        var interval = NaN;
        var duration = 4000;
        var current = 0;
        var total = newsItems.length;

        var stopSlideShow = function() {
            clearInterval(interval);
        };

        var startSlideShow = function() {
            stopSlideShow();

            interval = setInterval(function() {
                if (++current > total) {
                    current = 1;
                }


                bigNews.html($(['#item', current].join('')).clone()).show();

            }, duration);
        };

        $(newsItems).hover(function() {
            stopSlideShow();
            bigNews.html($(this).clone()).show();
        }, function() {
            startSlideShow();
            bigNews.html($('#item1').clone()).show();
        });

        startSlideShow();
    };

    $(document).ready(onReady);
})();

Jquery新闻滑块

1 个答案: