我几乎没有让这段代码工作。只剩下一件事了。
我想在我现有的幻灯片放映中添加上一个、下一个、播放和暂停按钮,就像在这个页面中一样。
我确实看过这个,但很混乱和复杂。
你能帮我修改下面的代码吗?
谢谢
<html>
<style>
* { margin: 0px; padding: 0px; }
#cover { width: 100%; height: 300px; background: #CCCCCC; }
#cover div { width: 100%; height: 200px; display: none; background: #FFFFFF; }
.content { text-align: center; }
</style>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var div_array = [];
var i = 0;
$('#cover div').each(function()
{
//alert($(this).attr('id'));
div_array.push('#' + $(this).attr('id'));
});
$(function(){
(function nextImage()
{
$(div_array[i++] || div_array[i = 0, i++]).hide().delay(500).fadeIn(1000).delay(1000).fadeOut(500, nextImage);
})();
});
});
</script>
</head>
<body>
<div id="cover">
<div id="slider_1"><p class="content">SLIDER ONE</p></div>
<div id="slider_2"><p class="content">SLIDER TWO</p></div>
<div id="slider_3"><p class="content">SLIDER THREE</p></div>
</div>
</body>