0

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

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

2）点击链接后，它会将您带到该页面

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

这是我到目前为止所拥有的：

    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 的想法和本教程的帮助下，我已经使滑块几乎可以正常工作。循环插件比我最初想象的要多得多。

4

1 回答 1

0

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

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

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

将这两者结合在一起将处理 sildeshow 部分，剩下的就是 CSS 样式的问题。

于 2012-02-07T23:41:55.830 回答