求写个图片之间相互切换的js,谢谢啊 6张图片:A B C;并排排列:点击A、B、C中的任意一张图片,其本身被相应的图片(A1、A2、A3)替换,其他两张图片必须是原样;类似tab选项卡的那种,怎么写? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 补充一下,界面上初始的时候只有A B C三张图片,A1 B1 C1是用来替换的。 看一下这个吧<!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>无标题文档</title> <style type="text/css"> body { font-size: 12px; font-family: "宋体"; background: #fff; color: #999; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p { padding: 0; margin: 0; } table { border-spacing: 0; border-collapse: collapse; } img { border: none; } ul, li { list-style-type: none; } a { text-decoration: none; } a:hover { text-decoration: underline; } .dis { display: none; } .dis_block { display: block; } .ul2 li { background: #CCC; float: left; width: 245px; height: 30px; line-height: 30px; border: #CCC 1px solid; cursor: pointer; color: #fff; } .ul2 li span { float: left; display: inline; margin-left: 5px; height: 30px; line-height: 30px; } .ul2 li span img { margin-top: 4px; width: 20px; height: 20px; } .apl { margin-top: -30px; width: 245px; height: 30px; background: #000; filter: alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4; } .apl_dis { display: none; margin-top: -30px; width: 245px; height: 30px; background: #000; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: 0.6; } .clear { clear: both; } </style></head><body> <div> <ul id="ul1"> <li id="li_1" class="dis_block"> <img src="../Image/png-0001.png" /></li> <li id="li_2" class="dis"> <img src="../Image/png-0002.png" /></li> <li id="li_3" class="dis"> <img src="../Image/png-0003.png" /></li> </ul> <ul id="ul2" class="ul2"> <li><span> <img src="../Image/png-0001.png" /></span> <span>面是京东方炼金术了1111</span> <p class="clear"> </p> <div class="apl_dis" id="div1" onmouseover="on(this,'li_1')"> </div> </li> <li><span> <img src="../Image/png-0002.png" /></span> <span>面是京东方炼金术了2222</span> <p class="clear"> </p> <div class="apl" id="div2" onmouseover="on(this,'li_2')"> </div> </li> <li><span> <img src="../Image/png-0003.png" /></span> <span>面是京东方炼金术了3333</span> <p class="clear"> </p> <div class="apl" id="div3" onmouseover="on(this,'li_3')"> </div> </li> </ul> </div> <script type="text/javascript"> var count = document.getElementById("ul2").getElementsByTagName("div").length; var current = 1; function on() { current++; if (current == count + 1) { current = 1; } var a = document.getElementById("ul2").getElementsByTagName("div"); var b = document.getElementById("ul1").getElementsByTagName("li"); for (i = 0; i < count; i++) { a.item(i).className = "apl"; b.item(i).className = "dis"; } if (arguments.length > 0) { arguments[0].className = "apl_dis"; document.getElementById(arguments[1]).className = "dis_block"; } else { document.getElementById("li_" + current).className = "dis_block"; document.getElementById("div" + current).className = "apl_dis"; } } setInterval('on()', 1000); </script></body></html> jquery中如何选择触发事件 javascript上传 google map的缩放级别问题 js路径问题 [Extjs]window中grid的checkbox全选问题 求 JS做1个标签处理程序!!基本页面已经有了!! 请教---日历控件 js或者html元素如何获取jsp中java变量 用JAVASCRIPT如何实现检查输入钱数的合法性? jscript中的函数可以嵌套调用吗? 求jquery跟随滚动条滚动的代码 jquery中回车键代替table键,为什么在input中加了2个隐含提交就不能执行提交
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body
{
font-size: 12px;
font-family: "宋体";
background: #fff;
color: #999;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p
{
padding: 0;
margin: 0;
}
table
{
border-spacing: 0;
border-collapse: collapse;
}
img
{
border: none;
}
ul, li
{
list-style-type: none;
}
a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.dis
{
display: none;
}
.dis_block
{
display: block;
}
.ul2 li
{
background: #CCC;
float: left;
width: 245px;
height: 30px;
line-height: 30px;
border: #CCC 1px solid;
cursor: pointer;
color: #fff;
}
.ul2 li span
{
float: left;
display: inline;
margin-left: 5px;
height: 30px;
line-height: 30px;
}
.ul2 li span img
{
margin-top: 4px;
width: 20px;
height: 20px;
}
.apl
{
margin-top: -30px;
width: 245px;
height: 30px;
background: #000;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
.apl_dis
{
display: none;
margin-top: -30px;
width: 245px;
height: 30px;
background: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<div>
<ul id="ul1">
<li id="li_1" class="dis_block">
<img src="../Image/png-0001.png" /></li>
<li id="li_2" class="dis">
<img src="../Image/png-0002.png" /></li>
<li id="li_3" class="dis">
<img src="../Image/png-0003.png" /></li>
</ul>
<ul id="ul2" class="ul2">
<li><span>
<img src="../Image/png-0001.png" /></span> <span>面是京东方炼金术了1111</span>
<p class="clear">
</p>
<div class="apl_dis" id="div1" onmouseover="on(this,'li_1')">
</div>
</li>
<li><span>
<img src="../Image/png-0002.png" /></span> <span>面是京东方炼金术了2222</span>
<p class="clear">
</p>
<div class="apl" id="div2" onmouseover="on(this,'li_2')">
</div>
</li>
<li><span>
<img src="../Image/png-0003.png" /></span> <span>面是京东方炼金术了3333</span>
<p class="clear">
</p>
<div class="apl" id="div3" onmouseover="on(this,'li_3')">
</div>
</li>
</ul>
</div>
<script type="text/javascript">
var count = document.getElementById("ul2").getElementsByTagName("div").length;
var current = 1;
function on() { current++;
if (current == count + 1) {
current = 1;
}
var a = document.getElementById("ul2").getElementsByTagName("div");
var b = document.getElementById("ul1").getElementsByTagName("li");
for (i = 0; i < count; i++) {
a.item(i).className = "apl";
b.item(i).className = "dis";
}
if (arguments.length > 0) {
arguments[0].className = "apl_dis";
document.getElementById(arguments[1]).className = "dis_block"; } else {
document.getElementById("li_" + current).className = "dis_block";
document.getElementById("div" + current).className = "apl_dis";
}
}
setInterval('on()', 1000);
</script>
</body>
</html>