0

我正在尝试使用“淡入淡出”过渡效果将 jquery Cycle 幻灯片插件添加到我的页面。但我仍然无法让它工作。

这是我的html：

<div class="container">
    <div class="slide1">
         <blockquote>
            <span class="leftquotes">&ldquo;</span> He promptly completed the task at hand and communicates really well till the project reaches the finishing line. I was pleased with his creative design and will definitely be hiring him again. <span class="rightquotes">&bdquo; </span>
         </blockquote>
         <img src="images/profile.jpg" width="120" height="100" />
         <h2>Steve Kruger</h2>
         <h6>UI/UX Designer at Woof Design Studio</h6>
         <div class="slide1bottom"></div>
    </div>

    <div class="slide2">
        <blockquote>
            <span class="leftquotes">&ldquo;</span> Till the project reaches the finishing line. I recommend him to anyone who wants their work done professionally. project reaches the finishing line. I recommend him to anyone who wants their work done professionally. The project ... <a href="#"> read more</a><span class="rightquotes">&bdquo; </span>
        </blockquote>
        <img src="images/images.jpg" width="120" height="100" />
        <h2>John Doe</h2>
        <h6>Developer Relations at Woof Studios</h6>
        <div class="slide2bottom"></div>
    </div>

    <div class="slide3">
        <blockquote>
            <span class="leftquotes "> &ldquo;</span> He promptly completed the task at hand and communicates really well till the project reaches the finishing line. I was pleased with his creative design and will definitely be hiring him again. <span class="rightquotes">&bdquo; </span>
        </blockquote>
        <img src="images/summer_school.png" width="120" height="100" />
        <h2>Steve Stevenson</h2>
        <h6>CEO Woof Web Design Studios</h6>
        <div class="slide3bottom"></div>
    </div>  
</div>

这是我的 jQuery ：

$(function() {
    $('#container').cycle();
});

我已将 JQuery 插件、循环插件和缓动插件正确导入到我的页面。

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="jscript/jquery.easing.1.3.js"></script>

这是我的小提琴：http: //jsfiddle.net/kRZ5r/

4

3 回答 3

1

您为初始化指定的选择器cycle正在寻找 ，id它应该在何时寻找class。

$('.container').cycle({
   timeout: 10000
});

在这里提琴

于 2013-03-10T04:15:27.110 回答
1

你有这个标记：

<div class="container">

然而你使用这个选择器：

$('#container').cycle();

#用于id选择器，您需要使用.，这是class选择器：

$('.container').cycle();

还值得注意的是，Alsup 先生发布了一个闪亮的新更新Cycle2 ( http://www.malsup.com/jquery/cycle2/ )，它与 ​​HTML5 兼容并且可以利用data-属性进行自动初始化。

于 2013-03-10T04:16:55.023 回答
1

在 html 代码中，您将容器称为类。但在 JQuery 中，您使用 # 将其定义为 id。

<div class="container">
</div>

$(function() {
    $('.container').cycle();
});
于 2017-12-08T17:31:21.693 回答