【发布时间】：2014-07-26 00:27:44
【问题描述】：
我已经构建了一个图像滑块，旨在通过淡入和淡出在四个图像之间进行转换。我使用了 J Query 插件“循环”并将效果设置为“淡出”。我还希望让用户能够通过将光标悬停在图像上来暂停幻灯片放映，并使用位于右上角的标准“下一个”、“上一个”按钮来控制流程。
代码如下：
全屏结果： 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,
});
目前，尽管所有组件似乎都在那里，但我的代码实际上还没有做任何事情。我错过了什么？
【问题讨论】：
-
你没有在Jsfiddle中导入Cycle插件，也没有激活jquery
标签： javascript jquery html css