Question

我是jQuery的新手，并试图在Wordpress上创建一个交互式滑块，它做了两件事：

1）在悬停时，它会在主照片框中显示一个新的div

2）点击链接，它会带你到那个页面

但是，错误控制台告诉我后面的脚本中没有定义。

这是我到目前为止所做的：

    function slideShow() {
            var current = jQuery('#featArea.show');
        var next = jQuery('#defaultImg');

        $('div#featLinkWorkshop a').hover (
            function() {
                next = jQuery('div#featWorkshops');
            }

//repeat the above for each section

    current.removeClass('show');
        next.fadeIn().addClass('show');

        setTimeout(slideShow, 3000);
    }

HTML

<div id="defaultImg" class="featImg show">
    <img src="#" />
</div>

<div id="featWorkshops" class="featImg">
    <img src="#" />
<div class="featImgCaption">

    <h1>Caption Title</h1>
    <p>Sentence of interest.</p>
    </div>
</div>

然后在HTML中

<div class="featLink" id="featLinkWorkshop">
    <img src="#" />

    <a href="#">Workshops</a>
</div>

以下是您可以在http://www.toppling-dominoes.com/sevenoaks上查看的页面。非常感谢你！

更新：借助于wahtever的想法和this tutorial，我已经让滑块几乎正常运行。循环插件比我最初想的要多得多。

Answer 1

尝试jquery循环插件：http://jquery.malsup.com/cycle/

1-您可以到这里查看如何生成缩略图：   http://jquery.malsup.com/cycle/pager2.html

2-在这里看看如何生成字幕：   http://jquery.malsup.com/cycle/caption.html

将这两者结合在一起将照顾sildeshow部分，其余部分是css样式的问题。

jQuery悬停在页面上更改另一个元素

1 个答案: