Question

我想用JavaScript创建一个简单的幻灯片。我找到了这个链接Page 我想要最后一张幻灯片。带有标题＆＃39; scrollRight（点击）＆＃39;的幻灯片。但它在我的页面上不起作用。问题是，当我有时按下图片，然后它离开。这是我的页面 MyPage以及代码：

＆＃13;

*{
    padding: 0px;
    margin: 0px;
    font-family: Raleway;
    line-height: 20px;
}

body{
    background-image: url(images/hintergrund.png);
}

section{
    margin-top: 20px;
    width: 1100px;
    background: white;
    border: 2px solid black;
	box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
    
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

article{
    width: 100%;
    background-color: red;
    overflow: hidden;
}

.one{
    height: 200px;
    width: 200px;
    float: left;
}

.two{
    float: right;
    width: 860px;
    word-wrap: break-word;
    background-color: blue;
    height: 200px;
}

＆＃13;

<html>
    <head>
        <title>Homepage</title>
        <link rel="stylesheet" href="index.css">
        <link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
        
        
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.one').cycle({ 
    fx:      'scrollRight', 
    next:   '.one', 
    timeout:  0, 
    easing:  'easeInOutBack' 
});
});
        </script>        
        
        
        
    </head>
    <body>
        <section>
            <article>
                <div class="one">
                    <img src="http://placehold.it/200x200" width="200" height="200" />
                    <img src="http://placehold.it/200x200" width="200" height="200" />
                    <img src="http://placehold.it/200x200" width="200" height="200" />
                    <img src="http://placehold.it/200x200" width="200" height="200" />
                </div>
                <div class="two">
                    <h1>Ansteckbutton</h1>
                    <br>
                    <p>
                    Groesse: 30cm Durchmesser
                    <br>
                    Farbe: Rot
                    <br>
                    Material: Metall
                    <br>
                    Form: Rund
                    </p>
                </div>
            </article>
            
            <br>
            <hr>
            <br>
            
            <article>
                                <div class="one">
                    
                </div>
                <div class="two">
                    exampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampampleexampleexampleexampleexampleexamleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexampleexamleexample
                </div>
            </article>
        </section>
    </body>
</html>



<!-- article mehrfach verwenden

＆＃13;

Answer 1

<强> Working Fiddle

您提供的参数有问题。

试试这个;

$(document).ready(function() {
    $('.one').cycle();
});

没有参数正常工作。

<强> Updated Working Fiddle

$(document).ready(function() {
       $('.one').cycle({
         fx: 'scrollRight',
         next: '.one',
         timeout: 0
    });
 });

<强>问题：
这是应用easing: 'easeInOutBack'的问题，它在控制台上抛出了以下错误。删除属性修复了问题。

TypeError: d.easing[(intermediate value)] is not a function

要进一步调查 this 问题，请检查此stackoverflow答案。

单击鼠标即可实现JQuery幻灯片效果

1 个答案: