1

我正在尝试创建一个在多个不同<div>s 之间循环的幻灯片，由于某种原因，我无法让幻灯片正常工作。我已经对此进行了一些研究，一切似乎都应该正常工作。我.js一遍又一遍地检查了链接的文件路径，并确保我的脚本标签都在正确的位置。

我所做的只是浏览器窗口中显示的三个图像，一个接一个。

这是代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorena Gaxiola</title>
<style type="text/css">
body {background: #222; font-family:Georgia, "Times New Roman", Times, serif; font-size:11px; margin:50px; color:#999}
ul li{line-height:20px;}
.new{margin-top:15px}
a{color:#fff; text-decoration:none; font-style:italic;}
a:hover{text-decoration:underline}
h1{font-size:16px; text-transform:uppercase; font-weight:normal; color:#fff; letter-spacing:1px;}
h2{font-size:12px; text-transform:uppercase; font-weight:normal; color:#999; letter-spacing:1px;}
#myslides img {height:500px; width:500px;}
</style>

<script type="text/javascript" src="jquery/jquery.cycle.all.js"></script>
<script type="text/javascript" src="jquery/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'cover',
speed: 500,
timeout: 2000
});
});
</script>

</head>

<body>

<div id="myslides">
<div>
<img style="500px;" src="http://images2.fanpop.com/images/photos/5800000/happy-kitten-kittens-5890512-1600-1200.jpg" />
</div>
<div>
<img src="http://images5.fanpop.com/image/photos/31400000/cute-kitten-in-marshmallows-cute-kittens-31462498-1914-1762.png" />
</div>
<div>
<img src="http://images2.fanpop.com/image/photos/9900000/so-cute-3-cute-kittens-9989494-1098-960.jpg" />
</div>

</div>
</body>
</html>

现在的图像是占位符，它们需要在<div>s 中，以便我以后可以更轻松地设置它们的样式。有人知道为什么我不能让我的幻灯片工作吗？

4

1 回答 1

2

首先包括jquery，然后是jquery循环：

<script type="text/javascript" src="jquery/jquery-1.10.1.js"></script>

<script type="text/javascript" src="jquery/jquery.cycle.all.js"></script>

它应该工作。顺便说一句，<img style="500px;"应该改变，我猜你想设置宽度？

于 2013-06-26T21:50:53.880 回答