文章/答案/技术大牛

发布

问为什么jquery不能工作？
EN

Stack Overflow用户

提问于 2014-11-25 19:20:13

回答 3查看 132关注 0票数 0

在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>

在body标签的底部，我做到了：

<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

javascript

jquery

html

css

回答 3

Stack Overflow用户

发布于 2014-11-25 19:35:30

请试一下这个。它起作用了。

Updated fiddle1：http://jsfiddle.net/uncb4bs9/8/

票数 0

Stack Overflow用户

发布于 2014-11-25 19:44:09

好吧，如果你想要一个旋转木马，你有错误的脚本，它应该是从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>

票数 0

Stack Overflow用户

发布于 2014-11-25 20:01:48

你有没有把

<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转到其源代码。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27125261

复制

相似问题

问为什么jquery不能工作？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么jquery不能工作？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么jquery不能工作？
EN