如何让不同的图像和文本自动循环浏览?我的图像正在循环，但我的文本不是
How do I get different images and text to cycle through automatically? My images are cycling, but my text isn't
我正在处理一个页面，该页面需要循环浏览带有相应图像描述的图像。我可以让图像循环浏览，但我的文本没有任何作用。我的功能可能很差，我从未尝试过同时循环图像和文本。任何帮助将不胜感激！这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet" href="project.css" />
<script type="text/javascript">
/* <![CDATA[ */
function changeDisplay(curLine) {
curLine.style.color = "red";
curLine.style.fontWeight = "bold";
}
function restoreDisplay(curLine) {
curLine.style.color = "blue";
curLine.style.fontWeight = "normal";
}
var curImage = new Array();
curImage[0] = "tool1";
curImage[1] = "tool2";
curImage[2] = "tool3";
curImage[3] = "tool4";
curImage[4] = "tool5";
var curInfo = new Array();
curInfo[0] = "info1";
curInfo[1] = "info2";
curInfo[2] = "info3";
curInfo[3] = "info4";
curInfo[4] = "info5";
function toolPics() {
if (curImage == "tool1") {
document.images[0].src = "images/ladder.jpg";
curImage = "tool2";
if (curInfo == "info1") {
document.getElementsByTagName("p")[2].style.display = "none";
curInfo = "info2";
}
}
else if (curImage == "tool2") {
document.images[0].src = "images/impacter.jpg";
curImage = "tool3";
if (curInfo == "info2") {
document.getElementsByTagName("p")[3].style.display = "none";
curInfo = "info3";
}
}
else if (curImage == "tool3") {
document.images[0].src = "images/saw.jpg";
curImage = "tool4";
if (curInfo == "info3") {
document.getElementsByTagName("p")[4].style.display = "none";
curInfo = "info4";
}
}
else if (curImage == "tool4") {
document.images[0].src = "images/mower.jpg";
curImage = "tool5";
if (curInfo == "info4") {
document.getElementsByTagName("p")[5].style.display = "none";
curInfo = "info5";
}
}
else {
document.images[0].src = "images/toolkit1.jpg";
curImage = "tool1";
document.getElementsByTagName("p")[1].style.display = "block";
curInfo = "info1";
}
}
/* ]]> */
</script>
</head>
<body onload="var begin=setInterval('toolPics()', 5000);">
<div>
<table style="border:none" class="menu">
<tr>
<td><a href="Index.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Home</a></td>
<td class="menupipe">|</td>
<td><a href="Specials.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Specials</a></td>
<td class="menupipe">|</td>
<td><a href="Tools.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Tools</a></td>
<td class="menupipe">|</td>
<td><a href="Prices.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Prices</a></td>
<td class="menupipe">|</td>
<td><a href="Order.html" class="menuicon" onmouseover="changeDisplay(this)" onmouseout="restoreDisplay(this)">Shop</a></td>
</tr>
</table>
</div>
<div>
<p>At <em style="color:red">Collin's Tool Supply</em>, we believe that every home should be in possesion of a few necessary tools. These tools will help the average person tackle most projects around the house that do not call for a professional. Take a look and make sure your home is prepared for the quick fix.
</div>
<div>
<table>
<tr>
<td><img src="images/toolkit1.jpg" alt="Tool Kit" /></td>
<td><p id="description1" style="display: block"><strong>Description:</strong> The Craftsmen Tool Kit offers 119 different tools to tackle most of your smaller repairs around the house. A must have in every home!<br />
<strong>Items Included:</strong> 3/8 in. Ratchet Handle, 3/8 in. x 6 in. Extension Bar, 3/8 in. to 1/4 in. Adapter, 3/8 in Socket Set, 1/4 in. x 3 in. Extension Bar, 1/4 in. Socket Set, Combination Wrenches Set, 3/8 in Spark Plug Socket, Screwdrivers, 6 in. Long Nose Pliers, 6 in. Diagonal Pliers, 6 in Adjustable Wrench, Hex Key Set, Screwdriver Bits, Ratchet Screwdriver, 1/4 in. Adapter, 1/4 in. Bit Holder, 16 oz. Hammer, Torpedo Level, 16 in. Tape Measure, Storage Case<br />
<strong>Price:</strong> $32.99</p>
<p id="description2" style="display: none"><strong>Description:</strong> Werner 6ft fiberglass step ladder. Used to help change light bulbs, reach items on top of your refrigerator, paint walls and ceilings, turn on ceiling fans, the list goes on and on.<br />
<strong>Price:</strong> $59.00</p>
<p id="description3" style="display: none"><strong>Description:</strong> Makita impact driver. Use this powerful, cordless drill to put together household items like tables, chairs, bed frames, kids toys, etc. Also great for hanging blinds, window treatments, and wall decorations. No pre-drilling with this powerful drill.<br />
<strong>Price:</strong> $179.99</p>
<p id="description4" style="display: none"><strong>Description:</strong> Dewalt 7inch circular saw. Cuts 2 x 4 with ease. Throw that hand saw away and save yourself some time and back ache.<br />
<strong>Price:</strong> $169.99</p>
<p id="description5" style="display: none"><strong>Description:</strong> Toro recycler self-propelled lawn mower. Keep your lawn in prestine condition with this easy to use lawn mower. It is self-propelled to make life a little easier on whoever is cutting the grass.<br />
<strong>Price:</strong> $329.99</p>
</td>
</tr>
</table>
</body>
</html>
如果我理解您要正确执行的操作，则似乎您需要通过设置style.display = "none"来隐藏以前的描述，但是为了显示当前描述，您必须为该元素设置style.display = "block"。
尝试类似操作：
if (curImage == "tool1") {
document.images[0].src = "images/ladder.jpg";
curImage = "tool2";
if (curInfo == "info1") {
// hide the previous description
document.getElementsByTagName("p")[1].style.display = "none";
// display the current description
document.getElementsByTagName("p")[2].style.display = "block";
curInfo = "info2";
}
}
相关文章：
- 将HTML表格导出到带有文本和图像的excel中
- 可单击滚动图像以显示文本框
- 正确输入的文本会更改图像
- 无法将包含文本和图像的SVG保存到画布
- 如何知道锚在文本或图像上
- 自动缩放图像以匹配文本高度
- 一个javascript实现base64图像编码并将结果写入文本文件
- 有人知道有没有jquery插件可以在图像上写文本，并让用户将其放置在图像内的任何位置
- jQuery对请求图像的外部文本进行查询
- 使输入文本的背景图像在点击“”时滑出视野;输入“”;
- 脚本图像获胜't用文本换行
- 将鼠标悬停在图像上时显示文本
- jQuery或JS代码，用于获取网页中当前选定的表单项/文本/图像的确切节点数据
- 如何将鼠标悬停在文本/图像上时触发动画文本
- 文本图像淡入淡出和淡入淡出问题:以连续方式显示文本淡入淡出
- 如何使用JavaScript将文本节点中的纯文本图像url替换为img元素
- Safari中的文本/图像按钮没有点击
- 从URL显示摘要文本/图像
- 删除默认文本"图像预览"在框中使用CKEditor
- 结合switch语句和onMouseOver显示文本&图像(javascript)
