为什么jquery不工作？

时间：2014-11-25 11:20:13

标签： javascript jquery html css

在head标签中我做了：

<head>
        <link rel="stylesheet" type="text/css" href="carousel.css">
        <link rel="stylesheet" type="text/css" href="vertical_slider.css">
        <link rel="stylesheet" type="text/css" href="glow-effect.css">
        <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
        <script src="http://malsup.github.com/jquery.cycle.all.js" type="text/javascript"></script>
        <script src="java_script.js"></script>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

在身体标签的底部，我做了：

<div class="vertical-slider-container">
    <img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" id="prev" class="vertical-slider-nav vertical-slider-nav-up" />
    <div class="slideshow"
         data-cycle-fx="carousel"
         data-cycle-timeout="3000"
         data-cycle-next="#next"
         data-cycle-prev="#prev"
         data-cycle-carousel-visible="3"
         data-cycle-carousel-vertical="true">

        <img src="http://malsup.github.io/images/beach1.jpg" />
        <img src="http://malsup.github.io/images/beach2.jpg" />
        <img src="http://malsup.github.io/images/beach3.jpg" />
        <img src="http://malsup.github.io/images/beach4.jpg" />
        <img src="http://malsup.github.io/images/beach5.jpg" />
        <img src="http://malsup.github.io/images/beach9.jpg" />
    </div>
    <img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" id="next" class="vertical-slider-nav vertical-slider-nav-down" />
</div>

然后在vertical_slider css文件中我做了：

.vertical-slider-container {
    background: #fff;
    border: 20px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    margin: 40px auto;
    position: relative;
    width: 120px;
}

.slideshow {
    background: #fff;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slideshow img {
    display: block;
    width: 100px;
    height: 100px;
    padding: 10px;
}

.vertical-slider-nav {
    color: rgba(0,0,0,0.8);
    cursor: pointer;
    display: block;
    height: 40px;
    margin-left: -20px;
    left: 50%;
    z-index: 10;
    position: absolute;
    overflow: hidden;
    opacity: 0;
    text-decoration: none;
    width: 40px;
    transition: all .3s ease;
}

.vertical-slider-nav-up {
    top: -60px;
}

.vertical-slider-container:hover .vertical-slider-nav-up:hover {
    opacity: 1;
}

.vertical-slider-container:hover .vertical-slider-nav-up {
    top: -20px;
    opacity: 0.7;
}

.vertical-slider-nav-down {
    bottom: -60px;
}

.vertical-slider-container:hover .vertical-slider-nav-down:hover {
    opacity: 1;
}

.vertical-slider-container:hover .vertical-slider-nav-down {
    bottom: -20px;
    opacity: 0.7;
}

在java_script.js文件中，我做了：

$(function() {

    $('.slideshow').cycle();

现在的方式我看到一张图片和下一张图片在同一个地方取代另一张图片就像淡入一样。

但是在javascript文件中，如果我将功能更改为：

$('.slideshow').cycle({
        fx: 'scrollUp'
    });

我看到图像一个接一个地向上滚动。

问题是箭头不工作而且没有到位，我每次看到一张图片而不是3张图片。

它应该像这个jsfiddler一样工作，我无法弄清楚它为什么不是。我没有收到任何错误。

Vertical Slider

3 个答案:

答案 0 :(得分：0)

请试试这个。它正在发挥作用。

Updated fiddle [1]：http://jsfiddle.net/uncb4bs9/8/

答案 1 :(得分：0)

如果你想要一个旋转木马你包含了错误的脚本，它应该来自cycle2插件加上旋转木马的脚本。然后它将像下面的代码段一样工作：）

应该是这两个脚本

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>

而不是

<script src="http://malsup.github.com/jquery.cycle.all.js" type="text/javascript"></script>


$('.slideshow').cycle();
.vertical-slider-container {
    background: #fff;
    border: 20px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    margin: 40px auto;
    position: relative;
    width: 120px;
}

.slideshow {
    background: #fff;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slideshow img {
    display: block;
    width: 100px;
    height: 100px;
    padding: 10px;
}

.vertical-slider-nav {
    color: rgba(0,0,0,0.8);
    cursor: pointer;
    display: block;
    height: 40px;
    margin-left: -20px;
    left: 50%;
    z-index: 10;
    position: absolute;
    overflow: hidden;
    opacity: 0;
    text-decoration: none;
    width: 40px;
    transition: all .3s ease;
}

.vertical-slider-nav-up {
    top: -60px;
}

.vertical-slider-container:hover .vertical-slider-nav-up:hover {
    opacity: 1;
}

.vertical-slider-container:hover .vertical-slider-nav-up {
    top: -20px;
    opacity: 0.7;
}

.vertical-slider-nav-down {
    bottom: -60px;
}

.vertical-slider-container:hover .vertical-slider-nav-down:hover {
    opacity: 1;
}

.vertical-slider-container:hover .vertical-slider-nav-down {
    bottom: -20px;
    opacity: 0.7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>


<div class="vertical-slider-container">
    <img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" id="prev" class="vertical-slider-nav vertical-slider-nav-up" />
    <div class="slideshow"
         data-cycle-fx="carousel"
         data-cycle-timeout="3000"
         data-cycle-next="#next"
         data-cycle-prev="#prev"
         data-cycle-carousel-visible="3"
         data-cycle-carousel-vertical="true">

        <img src="http://malsup.github.io/images/beach1.jpg" />
        <img src="http://malsup.github.io/images/beach2.jpg" />
        <img src="http://malsup.github.io/images/beach3.jpg" />
        <img src="http://malsup.github.io/images/beach4.jpg" />
        <img src="http://malsup.github.io/images/beach5.jpg" />
        <img src="http://malsup.github.io/images/beach9.jpg" />
    </div>
    <img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" id="next" class="vertical-slider-nav vertical-slider-nav-down" />
</div>

答案 2 :(得分：0)

你有没有把

<script type='text/javascript' src="http://malsup.github.io/jquery.cycle2.js"></script>
<script type='text/javascript' src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
你的代码中的

???? 请把它再试一次。它会工作。
有关完整示例，请查看此http://fiddle.jshell.net/uncb4bs9/3/show/light/并通过ctrl + U转到其源代码。

相关问题
最新问题