JQuery图像滑动器使用循环插件:为什么不't我的图像'
JQuery Image Slider Using "Cycle Plugin": Why Won't My Images "Cycle"?
我已经构建了一个图像滑块，旨在通过淡入和淡出在四个图像之间进行过渡。我使用了J查询插件"循环"，并将效果设置为"褪色"。我也希望给用户的能力，暂停幻灯片通过他们的光标悬停在图像，以及控制流与标准的"下一步"，"上一个"按钮位于右上角。
代码如下:
全屏结果: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>
#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;
}
$('#slider_01').cycle({
fx: 'fade',
next: '#next',
prev: '#prev',
pager: '#pager',
speed: 900,
timeout: 3000,
pause: 1,
});
目前，我的代码实际上还没有做任何事情，尽管所有的组件似乎都在那里。我错过了什么?
几点:
- 您没有在Jsfiddle中导入循环插件(外部资源)，也没有激活jquery(框架和扩展)
- 当向jsfiddle添加html时，只添加相关的html并去掉头部，正文标签
- 在你的javascript中，指定你想要你的插件运行在Document Ready
<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>
//Document ready
$(function(){
$('#slider_01').cycle({
fx: 'fade',
next: '#next',
prev: '#prev',
pager: '#pager',
speed: 900,
timeout: 3000,
pause: 1,
});
});
工作小提琴:
http://jsfiddle.net/spL4W/8/您没有使用fiddle导入，您自己编写了导入，这不是fiddle的工作方式。
$('#slider_01').cycle({
fx: 'fade',
next: '#next',
prev: '#prev',
pager: '#pager',
speed: 900,
timeout: 3000,
pause: 1,
});
就可以了。
仅供参考jsfiddle教程
相关文章：
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 为什么我的图像幻灯片不起作用
- 为什么图像样式不透明度不会更改画布中的图像对象
- 我已经为我的谷歌地图定义了我的指针图像和指针位置.为什么不显示
- 为什么背景图像有时不;t悬停时显示
- 为什么不是'我的滚动图像无法正常工作
- php为什么不将图像内容写入磁盘
- 为什么不't对图像进行自动高度调整
- 为什么不是't此图像显示在AJAX请求发送之前，并在完成时隐藏
- 为什么不't将此Javascript图像对象添加到图像数组中
- 为什么不't Settimeout提取更新的图像URL
- 为什么不't javascript在画布上绘制图像
- IE 11不缓存webgl图像-为什么
- 为什么canvas's draw图像比例不一致
- JQuery图像滑动器使用循环插件:为什么不't我的图像'
- Ionic:为什么不是't我的HTTP.GET没有加载我的图像
- 为什么不显示可折叠和可扩展的图像
- 为什么不是'它显示的不是-(负）图像，而是+图像
- 为什么不是'这不会产生图像
- 为什么不显示多个图像
