怎么用js实现以上效果？
日期：2014-05-20 浏览次数：20775 次
如何用js实现以下效果？？？
页面有九张图片，当鼠标移到第一张图片时显示第二张图片，鼠标移出时恢复，鼠标移动到第二张图片时，显示第三张图片，移开是恢复，以此类推。。。
------解决方案--------------------
<script>
function over(o) {
o.oldImage = o.src;
var nextId = parseInt(o.id.substr(3));
if (nextId == 9) nextId = 1;
else
nextId++;
o.src = document.getElementById("Img" + nextId).src;
}
function out(o) {
o.src = o.oldImage;
}
</script>
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img1"
img的id设置为id="Img1"到id="Img9"即可
例子
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body>
<script>
function over(o) {
o.oldImage = o.src;
var nextId = parseInt(o.id.substr(3));
if (nextId == 9) nextId = 1;
else
nextId++;
o.src = document.getElementById("Img" + nextId).src;
}
function out(o) {
o.src = o.oldImage;
}
</script>
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img1" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/qrcode.png" onmouseover="over(this)" onmouseout="out(this)" id="Img2" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/meng.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img3" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img4" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/qrcode.png" onmouseover="over(this)" onmouseout="out(this)" id="Img5" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/meng.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img6" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img7" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/qrcode.png" onmouseover="over(this)" onmouseout="out(this)" id="Img8" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/meng.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img9" width="100" height="60" />
</body>
</html>
页面有九张图片，当鼠标移到第一张图片时显示第二张图片，鼠标移出时恢复，鼠标移动到第二张图片时，显示第三张图片，移开是恢复，以此类推。。。
------解决方案--------------------
<script>
function over(o) {
o.oldImage = o.src;
var nextId = parseInt(o.id.substr(3));
if (nextId == 9) nextId = 1;
else
nextId++;
o.src = document.getElementById("Img" + nextId).src;
}
function out(o) {
o.src = o.oldImage;
}
</script>
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img1"
img的id设置为id="Img1"到id="Img9"即可
例子
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body>
<script>
function over(o) {
o.oldImage = o.src;
var nextId = parseInt(o.id.substr(3));
if (nextId == 9) nextId = 1;
else
nextId++;
o.src = document.getElementById("Img" + nextId).src;
}
function out(o) {
o.src = o.oldImage;
}
</script>
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img1" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/qrcode.png" onmouseover="over(this)" onmouseout="out(this)" id="Img2" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/meng.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img3" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img4" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/qrcode.png" onmouseover="over(this)" onmouseout="out(this)" id="Img5" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/meng.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img6" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img7" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/qrcode.png" onmouseover="over(this)" onmouseout="out(this)" id="Img8" width="100" height="60" />
<img src="http://dotnet.aspx.cc/Images/meng.gif" onmouseover="over(this)" onmouseout="out(this)" id="Img9" width="100" height="60" />
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
