9.23例子解析

1.图片轮播

<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:14px;}

</style>

<div style="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>

<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");

//当前索引加1
d++;

//判断索引是否超出范围
if(d>n)
{
　　d = 0;
}

//换图
//让所有隐藏
for(var i=0;i<=n;i++)
{
　　attr[i].style.display = "none";
}

//让该索引的显示
attr[d].style.display = "block";
}

</script>

2.选项卡效果

<style type="text/css">
*{ margin:0px auto; padding:0px}
#menu{ 240px; height:30px;}
.list{ 60px; height:30px; float:left; text-align:center; line-height:30px; vertical-align:middle;}
.list:hover{ cursor: pointer}
.nr{ 240px; height:200px; text-align:center; line-height:200px; vertical-align:middle}
</style>

<div style="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>

<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>

3.滑动效果

<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{ 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>

<div style="1000px; height:600px">

　<div id="left" style="200px;">
　<div id="btn" onclick="Bian()" style="left:185px;">-></div>
　</div>
　<div id="right" style="800px;">
</div>

<script type="text/javascript">

function Bian()
{
　　Dong();
}

//改变大小和位置
function Dong()
{
var d1 = document.getElementById("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>

4.进度条的制作

<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ 200px; height:10px; border:1px solid #60F;}
#nei{ 0px; height:10px; background-color:#F33; float:left}
</style>

<div style="600px; height:300px; margin-top:30px">

　　<div id="wai">
　　　　<div id="nei">
　　　　</div>
　　</div>

<input type="button" value="开始" onclick="Start()" />
</div>

<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>