Question

我正在关注此滑块的视频系列中的路线，我的语法与其他图像名称和ID值完全相同。 https://www.youtube.com/watch?v=5_P3Auq-U8c

所有文件都是本地的，因为这只是练习。我有一个链接到我的投递箱中的所有内容。 https://www.dropbox.com/sh/z4deqyemmf8xnn4/AACz7gv2dkBQHpM5F__EA-Era

我有一个jQuery文件，一个滑块动画文件，我正在使用Google jQuery库中的脚本标签。

这是我的索引文件：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>jQuery Slider</title>

    <style type="text/css">

.slider {
    width: 640px;
    height: 360px;
    overflow: hidden;
    margin: 30px auto;
    background-image: url(img/loadersmall.gif);
    background-repeat: no-repeat;
    background-position: center;
}
.shadow {
    background-image: url(img/shadow.png);
    background-repeat: no-repeat;
    background-position: top;
    width: 700px;
    height: 144px;
    margin: -60px auto;
}
.slider img {
    width: 640px;
    height: 360px;
    display: none;
}

    </style>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
    <script type="text/javascript">

        function Slider() {
            $(".slider #26").show("fade", 500);
            $(".slider #26").delay(5500).hide("slide", {direction: 'left'}, 500);
        }
    </script>
</head>

<body onload="Slider();">
    <div class="slider">
        <img id="26" src="img/26.png" border="0" alt="Funnymouth">
        <img id="52" src="img/52.png" border="0" alt="Come">
        <img id="29" src="img/29.png" border="0" alt="Xorax">
    </div>

    <div class="shadow"></div>

    <script src="js/jquery.js"></script>
    <script src="js/slider.js"></script>

</body>
</html>

我不知道还有什么可以让它发挥作用。也许我没有复制jQuery吧？也许某处有拼写错误？希望有人能帮助我解决这个问题。

Answer 1

首先，你包括jquery文件3次，slider.js文件不包含任何函数

这是使用jquery

实现滑块的更好方法

slider
  |--index.html
  |--slider.js
  |--slider.css
  |--img/

<强>的index.html

<!doctype html>
<html>
<head>
    <meta charset=utf-8>
    <title>Slider</title>
    <link rel="stylesheet" href="slider.css">
</head>
<body>

<div class="slider">
    <ul>
        <li><img src="img/img1.gif" alt="image"></li>
        <li><img src="img/img2.gif" alt="image"></li>
        <li><img src="img/img3.gif" alt="image"></li>
        <li><img src="img/img4.gif" alt="image"></li>
    </ul>
</div>

<div id="slider-nav">
    <button data-dir="prev">Previous</button>
    <button data-dir="next">Next</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="slider.js"></script>
<script>

(function() {
    var container = $('div.slider').css('overflow', 'hidden').children('ul'),
        slider = new Slider( container, $('#slider-nav') );

    slider.nav.find('button').on('click', function() {
        slider.setCurrent( $(this).data('dir') );
        slider.transition();
    });     
})();
</script>
</body>
</html>

<强> slider.js

function Slider( container, nav ) {
    this.container = container;
    this.nav = nav.show();

    this.imgs = this.container.find('img');
    this.imgWidth = this.imgs[0].width; // 600
    this.imgsLen = this.imgs.length;

    this.current = 0;
}

Slider.prototype.transition = function( coords ) {
    this.container.animate({
        'margin-left': coords || -( this.current * this.imgWidth )
    });
};

Slider.prototype.setCurrent = function( dir ) {
    var pos = this.current;

    pos += ( ~~( dir === 'next' ) || -1 );
    this.current = ( pos < 0 ) ? this.imgsLen - 1 : pos % this.imgsLen;

    return pos;
};

<强> slider.css

body {
    width: 600px;
    margin: 100px auto 0;
}
* { margin: 0; padding: 0; }
#slider-nav { 
    display: none; 
    margin-top: 1em;
}
#slider-nav button {
    padding: 1em;
    margin-right: 1em;
    border-radius: 10px;
    cursor: pointer;
}
.slider {
    width: inherit;
    height: 300px;
    overflow: scroll;
}
.slider ul {
    width: 10000px;
    list-style: none;
}
.slider li {
    float: left;
}

jQuery Slider动画无法正常工作

1 个答案: