鼠标点击的 JQuery 幻灯片效果

JQuery slide effect with mouseclick

本文关键字：幻灯片 JQuery 鼠标更新时间：2023-09-26

我想用JavaScript创建一个简单的幻灯片。我找到了这个链接页面我想要最后一个幻灯片。带有标题"向右滚动（单击）"的幻灯片。但它在我的页面上不起作用。问题是当我有时按下图片时，然后它就消失了。这是我的页面我的页面和这里的代码：

*{
    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;
}

<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

工作小提琴

您提供的参数有问题。

试试这个;

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

没有参数工作正常。

更新的工作小提琴

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

问题：
应用easing: 'easeInOutBack'时出现问题，并且在控制台上抛出以下错误。删除属性解决了此问题。

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

要进一步调查此问题，请查看此堆栈溢出答案。