使用jQuery周期插件作为图像旋转器和寻呼机问题
-
06-09-2019 - |
题
我试图使用jQuery,以便使对tumbs和大型图像寻呼机,我没有成功。
我使用这个例子中从jQuery的网站,我想遵循的方向但是它似乎没有被worknig。
我只看到第一个图像,而不是所有的人,但没有寻呼机。 我缺少的东西吗?
因此,这里是我的HTML:
<!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 runat="server">
<title></title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery.cycle.all.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').before('<ul id="nav">').cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide)
{
return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
}
});
});
</script>
<style type="text/css">
#slideshow { left: 20px }
#nav { width: 300px; margin: 15px }
#nav li { width: 50px; float: left; margin: 8px; list-style: none }
#nav a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="slideshow" >
<img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
<img src="http://www.cssnz.org/flower.jpg" />
<img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
</div>
</form>
</body>
</html>
解决方案
您需要添加容器
实施例
<body>
<form id="form1" runat="server">
<ul id="nav"></ul> <!-- You need this -->
<div id="slideshow">
<img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
<img src="http://www.cssnz.org/flower.jpg" />
<img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
</div>
</form>
</body>
更新
有关的页面底部的水平面的下方幻灯片
您需要添加此CSS
#nav li{
float: left;
}
和HTML变化到
<form id="form1" runat="server">
<div id="slideshow">
<img src="http://www.freefoto.com/images/12/13/12_13_4---Flowers-in-a-Garden-Border_web.jpg" />
<img src="http://www.cssnz.org/flower.jpg" />
<img src="http://www.global-b2b-network.com/direct/dbimage/50322257/Sun_Flowers.jpg" />
</div>
<ul id="nav"></ul> <!-- You need this -->
</form>
其他提示
您应该当文档准备好开始骑自行车吗?我不熟悉的循环仪,但它试一下:
<script type="text/javascript">
$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide)
{
return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
}
});
});
</script>
也许你试图运行,由于该文件还没有准备好还不存在的元素上的循环仪。另外,我觉得创建元素的语法要求他们自闭的,即,你应该有.before('<ul id="nav" />').cycle()
......,但我不是很熟悉的jQuery的来龙去脉呢。
不隶属于 StackOverflow