堆栈内存溢出
  繁体   English   中英

使用“循环插件”的JQuery图像滑块：为什么我的图像不“循环”？

[英]JQuery Image Slider Using “Cycle Plugin”: Why Won't My Images “Cycle”?

 原文  2014-07-25 16:12:29  2   2    javascript/ jquery/ html/ css

问题描述

我建立了一个图像滑块，该滑块可通过淡入和淡出在四个图像之间进行转换。 我使用了J Query插件“ Cycle”，并将效果设置为“ fade”。 我也希望使用户能够通过将光标悬停在图像上来暂停幻灯片放映，以及使用位于右上角的标准“下一个”，“上一个”按钮控制流程。

代码如下：

全屏结果： http : //jsfiddle.net/StacksOnStacksOverHoes/spL4W/3/embedded/result/

JS小提琴编辑： http : //jsfiddle.net/StacksOnStacksOverHoes/spL4W/3/

HTML： 

    <!DOCTYPE html>
<title>slider</title>
<!-- Link to Google Jquery API -->
<!-- Link to Local Jquery-->
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.cycle.all"></script>
</head>
<body>
    <div id="hero">
        <div id="pager"></div>
        <div id="pause"></div>
        <div id="play"></div>
        <div id="next"></div>
        <div id="prev"></div>
        <div id="slider_01">
            <div class="items">
                <div class="image_01"></div>
                <div class="info">
                     <h2>Hello World</h2>

                    <p>Hello world. <a href="#">Learn More</a>

                    </p>
                </div>
                <!--End of Info-->
            </div>
            <!--End of Items-->
            <div class="items">
                <div class="image_02"></div>
                <div class="info">
                     <h2>Hello World</h2>

                    <p>Hello world. <a href="#">Learn More</a>

                    </p>
                </div>
                <!--End of Info-->
            </div>
            <!--End of Items-->
            <div class="items">
                <div class="image_03"></div>
                <div class="info">
                     <h2>Hello World</h2>

                    <p>Hello world. <a href="#">Learn More</a>

                    </p>
                </div>
                <!--End of Info-->
            </div>
            <!--End of Items-->
            <div class="items">
                <div class="image_04"></div>
                <div class="info">
                     <h2>Hello World</h2>

                    <p>Hello world. <a href="#">Learn More</a>

                    </p>
                </div>
                <!--End of Info-->
            </div>
            <!--End of Items-->
        </div>
        <!--End of slider_01--> <a href="#">Previous</a>
 <a href="#">Next</a>

</body>
</html>

CSS： 

#hero {
    width: 960px;
    height: 500px;
    display: block;
    position: relative;
    margin: auto;
}
#slider_01 {
    width: 960px;
    height: 500px;
    display: block;
    position: absolute;
    margin: auto;
    overflow: hidden;
}
.info {
    width: 90%;
    height: 80px;
    display: block;
    position: relative;
    bottom: 100px;
    border: 1px solid black;
    background: rgba(102, 204, 204, .2);
    z-index: 99;
}
.info h2 {
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #FFF;
    padding: 15px 0 0 20px;
    line-height: 1px;
}
.info p {
    font-family: sans-serif;
    font-size: 15px;
    font-weight: lighter;
    color: #FFF;
    padding: 0px 0px 0px 20px;
    line-height: 1px;
}
#play {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
    position: absolute;
    top: 0px;
    right: 44px;
    background: rgba(102, 204, 0, .2);
    color: #FFF;
    cursor: pointer;
    z-index: 999;
}
#pause {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
    position: absolute;
    top: 0px;
    right: 88px;
    background: rgba(102, 204, 0, .5);
    color: #FFF;
    cursor: pointer;
    z-index: 999;
}
#next {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    background: rgba(102, 204, 0, .5);
    color: #FFF;
    cursor: pointer;
    z-index: 999;
}
#prev {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
    position: absolute;
    top: 0px;
    right: 133px;
    background: rgba(102, 204, 0, .5);
    color: #FFF;
    cursor: pointer;
    z-index: 999;
}
#pager {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    cursor: pointer;
    z-index: 999;
}
#pager a {
    width: 10px;
    height: 10px;
    display: inline-block;
    position: relative;
    border: 1px solid #FFF;
    border-radius: 20px;
    background-color: #FFF;
}
.image_01 {
    background-color: blue;
    width: 960px;
    height: 500px;
}
.image_02 {
    background-color: red;
    width: 960px;
    height: 500px;
}
.image_01 {
    background-color: green;
    width: 960px;
    height: 500px;
}
.image_01 {
    background-color: yellow;
    width: 960px;
    height: 500px;
}

J查询： 

$('#slider_01').cycle({
    fx: 'fade',
    next: '#next',
    prev: '#prev',
    pager: '#pager',
    speed: 900,
    timeout: 3000,
    pause: 1,
});

目前，尽管我所有的组件似乎都存在，但到目前为止我的代码实际上还没有执行任何操作。 我想念什么？

2 个解决方案

解决方案1
 0  2014-07-25 16:27:21

工作提琴：

http://jsfiddle.net/spL4W/8/

您不是使用小提琴输入的，而是您自己编写的，而这并不是小提琴的工作原理。 

$('#slider_01').cycle({
    fx: 'fade',
    next: '#next',
    prev: '#prev',
    pager: '#pager',
    speed: 900,
    timeout: 3000,
    pause: 1,
});

效果很好。
仅供参考jsfiddle教程

解决方案2
 0 已采纳  2014-07-25 16:27:44

一些东西：

  • 您没有在Jsfiddle中导入Cycle插件（外部资源），也没有激活jquery（框架和扩展名）
  • 将html添加到jsfiddle时，仅添加相关的html并去除head，body标签
  • 在您的javascript中，指定要让您的插件在Document Ready上运行

HTML： 

<div id="hero">
        <div id="pager"></div>
        <div id="pause"></div>
        <div id="play"></div>
        <div id="next"></div>
        <div id="prev"></div>
        <div id="slider_01">
            <div class="items">
                <div class="image_01"></div>
                <div class="info">
                     <h2>Hello World</h2>

                    <p>Hello world. <a href="#">Learn More</a>

                    </p>
                </div>
                <!--End of Info-->
            </div>
            <!--End of Items-->
            <div class="items">
                <div class="image_02"></div>
                <div class="info">
                     <h2>Hello World</h2>

                    <p>Hello world. <a href="#">Learn More</a>

                    </p>
                </div>
                <!--End of Info-->
            </div>
            <!--End of Items-->
            <div class="items">
                <div class="image_03"></div>
                <div class="info">
                     <h2>Hello World</h2>

                    <p>Hello world. <a href="#">Learn More</a>

                    </p>
                </div>
                <!--End of Info-->
            </div>
            <!--End of Items-->
            <div class="items">
                <div class="image_04"></div>
                <div class="info">
                     <h2>Hello World</h2>

                    <p>Hello world. <a href="#">Learn More</a>

                    </p>
                </div>
                <!--End of Info-->
            </div>
            <!--End of Items-->
        </div>
        <!--End of slider_01--> <a href="#">Previous</a>
 <a href="#">Next</a>

Javascript / JQuery： 

//Document ready
$(function(){
    $('#slider_01').cycle({
        fx: 'fade',
        next: '#next',
        prev: '#prev',
        pager: '#pager',
        speed: 900,
        timeout: 3000,
        pause: 1,
    });
});

工作实例

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使Cycle（JQuery插件）滑块仅显示图像，而不使Div标签 为什么jQuery Cycle插件不起作用？ jQuery的周期不会暂停 jQuery Cycle Plugin：为什么在此官方演示中，传呼机未显示确切的图像数量？ 为什么jQuery .cycle（）插件在我的网站上运行得不好？ jQuery循环插件无法正常工作，为什么？ 使用JQuery Cycle 2插件加载时显示所有图像 jQuery Cycle插件pagerAnchorBuilder图像变得不确定 jQuery Cycle Scrubber插件：添加图像链接 使用jQuery循环插件作为图像旋转器和寻呼机的问题
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM