JS之document例题讲解2
例题三、图片轮播
<body> <div style="width:1000px; height:250px; margin-top:30px"> <img src="img/11.jpg" width="1000" height="250" /> <img src="img/22.png" width="1000" height="250" style="display:none" /> <img src="img/33.png" width="1000" height="250" style="display:none" /> <img src="img/44.png" width="1000" height="250" style="display:none" /> </div> </body> <script type="text/javascript"> window.setInterval("Huan()",2000); //找到图片的最大索引 var n = document.getElementsByTagName("img").length-1; //存当前图片的索引 var d =0; //换图 function Huan() { var attr = document.getElementsByTagName("img");//找到所有图片 d++;//当前索引加1 if(d>n)//判断索引是否超出范围 { d = 0; } for(var i=0;i<=n;i++)//换图 { attr[i].style.display = "none";//让所有隐藏 } attr[d].style.display = "block";//让该索引的显示 } </script>
例题四、选项卡效果
<style type="text/css">
*{ margin:0px auto; padding:0px}
#menu{ width:240px; height:30px;}
.list{ width:60px; height:30px; float:left; text-align:center; line-height:30px; vertical-align:middle;}
.list:hover{ cursor: pointer}
.nr{ width:240px; height:200px; text-align:center; line-height:200px; vertical-align:middle}
</style>
</head>
<body>
<div style="width:700px; height:500px; margin-top:30px">
<div id="menu">
<div class="list" style="background-color:#0F0" onclick="Show('d1')">娱乐</div>
<div class="list" style="background-color:#369" onclick="Show('d2')">社会</div>
<div class="list" style="background-color:#F60" onclick="Show('d3')">体育</div>
<div class="list" style="background-color:#CC3" onclick="Show('d4')">军事</div>
</div>
<div id="d1" class="nr" style="background-color:#3C0">娱乐新闻</div>
<div id="d2" class="nr" style="background-color:#399; display:none">社会新闻</div> //隐藏
<div id="d3" class="nr" style="background-color:#F30; display:none">体育新闻</div> //隐藏
<div id="d4" class="nr" style="background-color:#CF3; display:none">军事新闻</div> //隐藏
</div>
</body>
<script type="text/javascript">
function Show(id)//鼠标点击执行
{
var attr = document.getElementsByClassName("nr");//隐藏所有
for(var i=0;i<attr.length;i++)
{
attr[i].style.display = "none";
}
document.getElementById(id).style.display = "block";//显示当前的
}
</script>
五、滑动效果
<style type="text/css">
*{ margin:0px auto; padding:0px}
#left{ height:600px; background-color:#63C; float:left}
#right{ height:600px; background-color:#F33; float:left}
#btn{ width:30px; height:30px; background-color:#FFF; position:relative; top:285px; color:#60F; font-weight:bold; text-align:center; line-height:30px; vertical-align:middle; float:left}
#btn:hover{ cursor:pointer}
</style>
</head>
<body>
<div style="width:1000px; height:600px">
<div id="left" style="width:200px;">
<div id="btn" onclick="Bian()" style="left:185px;">-></div>
</div>
<div id="right" style="width:800px;"></div>
</body>
<script type="text/javascript">
function Bian()//点击->时执行Bian循环
{
Dong();//执行Dong循环
}
function Dong()//循环dong的作用是改变大小和位置
{
var d1 = document.getElementById("left");//找到id为left的元素
var d2 = document.getElementById("right");
var btn = document.getElementById("btn");
//左侧DIV变宽
var yskd1 = d1.style.width;
var w1 = yskd1.substr(0,yskd1.length-2);
var w1 = parseInt(w1)+2;
d1.style.width = w1+"px";
//右侧DIV变窄
var yskd2 = d2.style.width;
var w2 = yskd2.substr(0,yskd2.length-2);
var w2 = parseInt(w2)-2;
d2.style.width = w2+"px";
//将按钮移动
var ysjl = btn.style.left;
var w3 = ysjl.substr(0,ysjl.length-2);
var w3 = parseInt(w3)+2;
btn.style.left = w3+"px";
if(w2>200)
{
//自己调自己
window.setTimeout("Dong()",1);
}
}
</script>
例题六、进度条的制作
<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:200px; height:10px; border:1px solid #60F;}
#nei{ width:0px; height:10px; background-color:#F33; float:left}
</style>
</head>
<body>
<div style="width:600px; height:300px; margin-top:30px">
<div id="wai"></div>
<div id="nei"></div>
<input type="button" value="开始" onclick="Start()" />
</div>
</body>
<script type="text/javascript">
function Start()
{
Bian();
}
var bfb = 0;
function Bian()
{
//将百分比变化
bfb= bfb+1;
//改变宽度
document.getElementById("nei").style.width = bfb+"%";
//判断
if(bfb<100)
{
window.setTimeout("Bian()",50);
}
}
</script>
