JavaScript兑现Mop自动切换的图片新闻框子
日期：2014-05-16 浏览次数：20321 次
JavaScript实现Mop自动切换的图片新闻框子
<html>
<head>
<style type='text/css'>
*{margin:0;padding:0;border:0;}
#main{width:450px;height:400px;background-color:green;margin:auto}
#head{height:350px;background-color:blue}
#head img{width:440px;height:340px;padding-left:5px;padding-right:5px}
#content li{float:left;list-style:none;text-align:center;margin-right:5px;width:35px;height:30px;line-height:30px;background-color:orange;border:1px solid orange}
#content ul{ margin:auto; width:360px; margin-right:30px;}
</style>
</head>
<body onload='Move()'>
<div id='main'>
<div id='head'>
<p id='p1' onmouseover='show(1)' onmouseout='start(1)'> <img src="1.jpg"> </p>
<p id='p2' onmouseover='show(2)' onmouseout='start(2)' style='display:none'><img src="2.jpg"></p>
<p id='p3' onmouseover='show(3)' onmouseout='start(3)' style='display:none'><img src="3.jpg"></p>
<p id='p4' onmouseover='show(4)' onmouseout='start(4)' style='display:none'><img src="4.jpg"></p>
<p id='p5' onmouseover='show(5)' onmouseout='start(5)' style='display:none'><img src="5.jpg"></p>
<p id='p6' onmouseover='show(6)' onmouseout='start(6)' style='display:none'><img src="6.jpg"></p>
<p id='p7' onmouseover='show(7)' onmouseout='start(7)' style='display:none'><img src="7.jpg"></p>
<p id='p8' onmouseover='show(8)' onmouseout='start(8)' style='display:none'><img src="8.jpg"></p>
</div>
<div id='content'>
<ul>
<li id='tab1' onmouseover='show(1)' onmouseout='start(1)' style='background-color:green'>新闻</li>
<li id='tab2' onmouseover='show(2)' onmouseout='start(2)'>体育</li>
<li id='tab3' onmouseover='show(3)' onmouseout='start(3)'>音乐</li>
<li id='tab4' onmouseover='show(4)' onmouseout='start(4)'>娱乐</li>
<li id='tab5' onmouseover='show(5)' onmouseout='start(5)'>搞笑</li>
<li id='tab6' onmouseover='show(6)' onmouseout='start(6)'>旅游</li>
<li id='tab7' onmouseover='show(7)' onmouseout='start(7)'>工作</li>
<li id='tab8' onmouseover='show(8)' onmouseout='start(8)'>校园</li>
</ul>
</div>
</div>
</body>
<script>
var ord = 1;
var time = setInterval('Move()',600);
function show(n){
clearInterval(time);
for(var i = 1; i<9 ; i++){
document.getElementById('tab'+i).style.backgroundColor = 'orange';
document.getElementById('p'+i).style.display = 'none';
}
document.getElementById('tab'+n).style.backgroundColor = 'green';
&
<html>
<head>
<style type='text/css'>
*{margin:0;padding:0;border:0;}
#main{width:450px;height:400px;background-color:green;margin:auto}
#head{height:350px;background-color:blue}
#head img{width:440px;height:340px;padding-left:5px;padding-right:5px}
#content li{float:left;list-style:none;text-align:center;margin-right:5px;width:35px;height:30px;line-height:30px;background-color:orange;border:1px solid orange}
#content ul{ margin:auto; width:360px; margin-right:30px;}
</style>
</head>
<body onload='Move()'>
<div id='main'>
<div id='head'>
<p id='p1' onmouseover='show(1)' onmouseout='start(1)'> <img src="1.jpg"> </p>
<p id='p2' onmouseover='show(2)' onmouseout='start(2)' style='display:none'><img src="2.jpg"></p>
<p id='p3' onmouseover='show(3)' onmouseout='start(3)' style='display:none'><img src="3.jpg"></p>
<p id='p4' onmouseover='show(4)' onmouseout='start(4)' style='display:none'><img src="4.jpg"></p>
<p id='p5' onmouseover='show(5)' onmouseout='start(5)' style='display:none'><img src="5.jpg"></p>
<p id='p6' onmouseover='show(6)' onmouseout='start(6)' style='display:none'><img src="6.jpg"></p>
<p id='p7' onmouseover='show(7)' onmouseout='start(7)' style='display:none'><img src="7.jpg"></p>
<p id='p8' onmouseover='show(8)' onmouseout='start(8)' style='display:none'><img src="8.jpg"></p>
</div>
<div id='content'>
<ul>
<li id='tab1' onmouseover='show(1)' onmouseout='start(1)' style='background-color:green'>新闻</li>
<li id='tab2' onmouseover='show(2)' onmouseout='start(2)'>体育</li>
<li id='tab3' onmouseover='show(3)' onmouseout='start(3)'>音乐</li>
<li id='tab4' onmouseover='show(4)' onmouseout='start(4)'>娱乐</li>
<li id='tab5' onmouseover='show(5)' onmouseout='start(5)'>搞笑</li>
<li id='tab6' onmouseover='show(6)' onmouseout='start(6)'>旅游</li>
<li id='tab7' onmouseover='show(7)' onmouseout='start(7)'>工作</li>
<li id='tab8' onmouseover='show(8)' onmouseout='start(8)'>校园</li>
</ul>
</div>
</div>
</body>
<script>
var ord = 1;
var time = setInterval('Move()',600);
function show(n){
clearInterval(time);
for(var i = 1; i<9 ; i++){
document.getElementById('tab'+i).style.backgroundColor = 'orange';
document.getElementById('p'+i).style.display = 'none';
}
document.getElementById('tab'+n).style.backgroundColor = 'green';
&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
