JavaScript 鼠标悬停及自动切换的问题! 谢谢
我想在首页的好几个栏目设置个菜单栏(TAB选项条}:当鼠标悬停在上面的时候旁边的文章列表就会切换;当鼠标不在此栏目的时候TAB选项条也回间隔几秒自动循环切换;就像<<浙江...
我想在首页的好几个栏目设置个菜单栏(TAB选项条}:
当鼠标悬停在上面的时候 旁边的文章列表就会切换;
当鼠标不在此栏目的时候 TAB选项条 也回间隔几秒自动循环切换;
就像<<浙江移动_中国移动通信>>首页的"聚宝" "最新优惠" 栏目一样;
谢谢!!!
最好是写一个;然后所有栏目都可以用;
就是不要每做一个栏目,就又要单独写一个JavaScript, 这样麻烦死了;
谢谢了!
在最好就是简单点 或者注释详细点.不然我看不懂, 呵呵 麻烦了!!! 展开
当鼠标悬停在上面的时候 旁边的文章列表就会切换;
当鼠标不在此栏目的时候 TAB选项条 也回间隔几秒自动循环切换;
就像<<浙江移动_中国移动通信>>首页的"聚宝" "最新优惠" 栏目一样;
谢谢!!!
最好是写一个;然后所有栏目都可以用;
就是不要每做一个栏目,就又要单独写一个JavaScript, 这样麻烦死了;
谢谢了!
在最好就是简单点 或者注释详细点.不然我看不懂, 呵呵 麻烦了!!! 展开
3个回答
展开全部
<head>
<title></title>
<style >
.cc{ margin-left:5px; float:left; background-color:#999999; width:20px; height:20px;}
.tt{ clear:both; display:none; width:100px; height:100px;}
#t1{ background-color:#ff0000;}
#t2{background-color:Yellow;}
#t3{background-color:Black;}
#t4{background-color:Blue;}
</style>
</head>
<body>
<div id="body">
<div id="c1" class="cc" onmouseover="change(1)" onmouseout="to(1)">1</div>
<div id="c2" class="cc" onmouseover="change(2)" onmouseout="to(2)">2</div>
<div id="c3" class="cc" onmouseover="change(3)" onmouseout="to(3)">3</div>
<div id="c4" class="cc" onmouseover="change(4)" onmouseout="to(4)">4</div>
<div id="t1" class="tt"></div>
<div id="t2" class="tt"></div>
<div id="t3" class="tt"></div>
<div id="t4" class="tt"></div>
<script>/* "id"是元素名 就是每个DIV都有一个自己的名字*/
var p=1;
function change(t) {
clearInterval(tt);/*清除一个叫tt的interval 就是说当我鼠标停在上面的时候停止切换*/
for (k = 1; k <= 4; k++) { document.getElementById("t" + k).style.display = "none"; }/*初始化 使每一个自动切换的窗口消失*/
document.getElementById("t" + t).style.display = "block";/*onmouseout="to(x)"中的x是个参数 把这个参数传到change(t)这个函数中 然后把t用参数替换掉，这里的意思是鼠标碰到那个 相应的现实窗口就出现*/
}
function to(m) {
p = m;/* 这里就是说当鼠标离开某个DIV的时候再把参数传到to()函数里，然后把参数的值给P 覆盖掉原来的P的值 这里的作用就是让鼠标离开后继续按照你离开后的地方继续切换*/
tt = setInterval(auto, 500);/*这里是让他继续切换*/
}
function auto() {/*这个函数作用就是一开始的自动切换*/
for (k = 1; k <= 4; k++) { document.getElementById("t" + k).style.display = "none"; }/*初始化*/
document.getElementById("t" + p).style.display = "block";
if (p > 3) { p = 1; } else { p++; }/*当切换到没了 从头开始*/
}
var tt = setInterval(auto, 500);/* 这里是定义 interval*/
window.onload = auto;/* 这里不用多说了吧*/
</script>
</div>
</body>
<title></title>
<style >
.cc{ margin-left:5px; float:left; background-color:#999999; width:20px; height:20px;}
.tt{ clear:both; display:none; width:100px; height:100px;}
#t1{ background-color:#ff0000;}
#t2{background-color:Yellow;}
#t3{background-color:Black;}
#t4{background-color:Blue;}
</style>
</head>
<body>
<div id="body">
<div id="c1" class="cc" onmouseover="change(1)" onmouseout="to(1)">1</div>
<div id="c2" class="cc" onmouseover="change(2)" onmouseout="to(2)">2</div>
<div id="c3" class="cc" onmouseover="change(3)" onmouseout="to(3)">3</div>
<div id="c4" class="cc" onmouseover="change(4)" onmouseout="to(4)">4</div>
<div id="t1" class="tt"></div>
<div id="t2" class="tt"></div>
<div id="t3" class="tt"></div>
<div id="t4" class="tt"></div>
<script>/* "id"是元素名 就是每个DIV都有一个自己的名字*/
var p=1;
function change(t) {
clearInterval(tt);/*清除一个叫tt的interval 就是说当我鼠标停在上面的时候停止切换*/
for (k = 1; k <= 4; k++) { document.getElementById("t" + k).style.display = "none"; }/*初始化 使每一个自动切换的窗口消失*/
document.getElementById("t" + t).style.display = "block";/*onmouseout="to(x)"中的x是个参数 把这个参数传到change(t)这个函数中 然后把t用参数替换掉，这里的意思是鼠标碰到那个 相应的现实窗口就出现*/
}
function to(m) {
p = m;/* 这里就是说当鼠标离开某个DIV的时候再把参数传到to()函数里，然后把参数的值给P 覆盖掉原来的P的值 这里的作用就是让鼠标离开后继续按照你离开后的地方继续切换*/
tt = setInterval(auto, 500);/*这里是让他继续切换*/
}
function auto() {/*这个函数作用就是一开始的自动切换*/
for (k = 1; k <= 4; k++) { document.getElementById("t" + k).style.display = "none"; }/*初始化*/
document.getElementById("t" + p).style.display = "block";
if (p > 3) { p = 1; } else { p++; }/*当切换到没了 从头开始*/
}
var tt = setInterval(auto, 500);/* 这里是定义 interval*/
window.onload = auto;/* 这里不用多说了吧*/
</script>
</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
