我已经构建了一个图像滑块，用于通过淡入和淡出来在四个图像之间进行转换。我使用了J Query插件“Cycle”并将效果设置为“淡入淡出”。我也希望通过将光标悬停在图像上来让用户能够暂停幻灯片放映，并使用位于右上角的标准“下一个”，“上一个”按钮来控制流程。
代码如下：
全屏结果： 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,
});
目前，我的代码实际上并没有做任何事情，尽管所有组件似乎都存在。我错过了什么？
答案 0 :(得分：0)
工作小提琴：
你没有使用小提琴导入，你自己编写了导入，这不是小提琴的工作方式。
$('#slider_01').cycle({
fx: 'fade',
next: '#next',
prev: '#prev',
pager: '#pager',
speed: 900,
timeout: 3000,
pause: 1,
});
工作得很好。
FYI
jsfiddle tutorial
答案 1 :(得分：0)
一些事情：
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,
});
});