js该程序为什么鼠标移入显示,移出不隐藏---急急急！！！！
<script>window.onload=function(){varoPrev=document.getElementById('prev');varoNext=do...
<script>
window.onload = function (){
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var oP = document.getElementById('p1');
var oStrong = document.getElementById('strong1');
var oImg = document.getElementById('img1');
var aBtn = document.getElementsByTagName('input');
var oDiv = document.getElementById('box');
var oInp= oDiv.getElementsByTagName('input');
var arrUrl = [ 'img/8.jpg', 'img/9.jpg', 'img/10.jpg', 'img/11.jpg' ,'img/13.jpg'];
var arrText = [ '美食蛋糕', '美味蛋糕', '爽口蛋糕', '心灵蛋糕' ,'情侣蛋糕'];
var num = 0;
var onOff = true;
aBtn[0].onclick = function (){ onOff = true; document.getElementsByTagName('span')[0].innerHTML = '图片可从最后一张跳转到第一张循环切换'; };
aBtn[1].onclick = function (){ onOff = false; document.getElementsByTagName('span')[0].innerHTML = '图片只能到最后一张\或只能到第一张切换'; };
// 初始化
function fnTab(){
oP.innerHTML = arrText[num];
oStrong.innerHTML = num+1 + ' / ' + arrText.length;
oImg.src = arrUrl[num];
}
fnTab();
oPrev.onclick = function (){
num --;
if( num == -1 ){
if(onOff){num = arrText.length-1;}else{
alert('这已经是第一张了，不能再往前了~~');
num = 0;
}
//num = arrText.length-1;
}
fnTab();
};
oNext.onclick = function (){
num ++;
if( num == arrText.length ){
if(onOff){num = 0;}else{
alert('已经到最后一张啦~');
num = arrText.length-1;
}
}
fnTab();
};
for(var i=0;i<oInp.length;i++)
{
oInp[i].index=i;
oInp[i].onmouseover=function()
{
showDiv(this.index,1);
}
oInp[i].onmouseout=function()
{
showDiv(this.index,0);
}
}
function showDiv(i,blean){
var div = document.createElement("div");
div.style.position = "absolute";
div.style.marginLeft="100PX";
div.style.width = "80px";
div.style.height ="80px";
div.style.left = i*100+40+"px";
div.style.border= "1px solid #ddd";
div.style.background="red";
if(blean==1)
{
div.style.display="block";
}else{
div.style.display="none";
}
div.style.textAlign="center";
div.innerHTML ="你好"+i;
document.body.appendChild(div);
}
<body>
<input type="button" value="循环切换" />
<input type="button" value="顺序切换" />
<div id="box">
<span>图片可从最后一张跳转到第一张循环切换</span>
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<p id="p1">图片文字加载中……</p>
<strong id="strong1">图片数量计算中……</strong>
<img id="img1" src=""/>
<input id="rod" type="button" />
<input id="rod" type="button" />
<input id="rod" type="button" />
<input id="rod" type="button" />
<input id="rod" type="button" />
};
</script> 展开
window.onload = function (){
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var oP = document.getElementById('p1');
var oStrong = document.getElementById('strong1');
var oImg = document.getElementById('img1');
var aBtn = document.getElementsByTagName('input');
var oDiv = document.getElementById('box');
var oInp= oDiv.getElementsByTagName('input');
var arrUrl = [ 'img/8.jpg', 'img/9.jpg', 'img/10.jpg', 'img/11.jpg' ,'img/13.jpg'];
var arrText = [ '美食蛋糕', '美味蛋糕', '爽口蛋糕', '心灵蛋糕' ,'情侣蛋糕'];
var num = 0;
var onOff = true;
aBtn[0].onclick = function (){ onOff = true; document.getElementsByTagName('span')[0].innerHTML = '图片可从最后一张跳转到第一张循环切换'; };
aBtn[1].onclick = function (){ onOff = false; document.getElementsByTagName('span')[0].innerHTML = '图片只能到最后一张\或只能到第一张切换'; };
// 初始化
function fnTab(){
oP.innerHTML = arrText[num];
oStrong.innerHTML = num+1 + ' / ' + arrText.length;
oImg.src = arrUrl[num];
}
fnTab();
oPrev.onclick = function (){
num --;
if( num == -1 ){
if(onOff){num = arrText.length-1;}else{
alert('这已经是第一张了，不能再往前了~~');
num = 0;
}
//num = arrText.length-1;
}
fnTab();
};
oNext.onclick = function (){
num ++;
if( num == arrText.length ){
if(onOff){num = 0;}else{
alert('已经到最后一张啦~');
num = arrText.length-1;
}
}
fnTab();
};
for(var i=0;i<oInp.length;i++)
{
oInp[i].index=i;
oInp[i].onmouseover=function()
{
showDiv(this.index,1);
}
oInp[i].onmouseout=function()
{
showDiv(this.index,0);
}
}
function showDiv(i,blean){
var div = document.createElement("div");
div.style.position = "absolute";
div.style.marginLeft="100PX";
div.style.width = "80px";
div.style.height ="80px";
div.style.left = i*100+40+"px";
div.style.border= "1px solid #ddd";
div.style.background="red";
if(blean==1)
{
div.style.display="block";
}else{
div.style.display="none";
}
div.style.textAlign="center";
div.innerHTML ="你好"+i;
document.body.appendChild(div);
}
<body>
<input type="button" value="循环切换" />
<input type="button" value="顺序切换" />
<div id="box">
<span>图片可从最后一张跳转到第一张循环切换</span>
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<p id="p1">图片文字加载中……</p>
<strong id="strong1">图片数量计算中……</strong>
<img id="img1" src=""/>
<input id="rod" type="button" />
<input id="rod" type="button" />
<input id="rod" type="button" />
<input id="rod" type="button" />
<input id="rod" type="button" />
};
</script> 展开
1个回答
展开全部
function showDiv(i, blean) {
var div = document.getElementById("div" + i); //获取绑定的 DIV
if (div == undefined) { //如果 DIV，不存在，则创建
div = document.createElement("div");
div.id = "div" + i; //给ID 赋值，好下一次隐藏
div.style.position = "absolute";
div.style.marginLeft = "100PX";
div.style.width = "80px";
div.style.height = "80px";
div.style.left = i * 100 + 40 + "px";
div.style.border = "1px solid #ddd";
div.style.background = "red";
div.style.textAlign = "center";
div.innerHTML = "你好" + i;
document.body.appendChild(div);
}
if (blean == 1) {
div.style.display = "block"; //再显示
} else {
div.style.display = "none"; //隐藏
}
}不能用的原因是，即使你离开事件，也是在创建一个新的、隐藏的DIV
而不是隐藏原先的 DIV
追问
div.innerHTML = "";怎么显示不出图片。
追答
div.innerHTML = "<img src='" + arrUrl[i] + "' style='width:35px;height=35px;'/>";
//少了两个双引号 "字符串" + 变量 + "字符串"
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
