我一直在学习使用我在某个网站上看到的幻灯片代码。尽管我已经设法使它能够很好地显示图像,但我无法弄清楚如何在幻灯片更改时在图像旁边的另一个表格中显示图像名称。在幻灯片放映中显示图像名称
我有provided the code here。所以我需要你的帮助。我在寻找的是当幻灯片随着另一张图片而改变时,我希望图片名称显示在其旁边。
感谢您的支持。
更新 - 这是一个基于Gilly3的建议更新的代码,但我仍然对如何获取名称显示
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>JQuery Cycle Plugin - Pager Demo with Prev/Next Controls</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<style type="text/css">
#main { margin: 20px }
#nav { margin: 10px; position: relative }
#nav li { float: left; list-style: none}
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#nav li.activeSlide a { background: #faa; color: black }
#nav a:focus { outline: none; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
prev: '.prev', // Setup prev links
next: '.next', // Setup next links
pager: '.nav', // Setup pager navs
before: function() {
$("#name").text(this.alt);
}
});
});
</script>
<style type="text/css">
#left, #slideshow, #right { float: left; width: 200px; }
</style>
</head>
<body>
<!-- left nav bar -->
<div id="left">
<a href="#"><span class="prev">Prev</span></a>
<a href="#"><span class="next">Next</span></a>
<ul class="nav"></ul>
</div>
<!-- slideshow -->
<div id="slideshow">
<?php
mysql_connect("localhost", "root", "")or die("cannot connect");
mysql_select_db($db_name)or die("cannot select DB");
$data = mysql_query("SELECT * FROM people") or die(mysql_error());
while($info = mysql_fetch_array($data)){
echo "<img src=\"http://localhost:8080/about/images/".$info['photo'] . "\" alt=\"".$info['name'] ."\"/>";
}
?>
</div>
<div id="name">
HELP ME PRINT THE NAME HERE
</div>
<!-- right nav bar -->
<div id="right">
<a href="#"><span class="prev">Prev</span></a>
<a href="#"><span class="next">Next</span></a>
<ul class="nav"></ul>
</div>
</div>
</body>
</html>
提供代码* here *,并且现场演示会很有用(可能在[JS Fiddle](http://jsfiddle.net/)供我们使用,并查看您的工作内容与 –
你有没有尝试过任何东西? –