9.23例子解析

1.图片轮播

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

</style>

 

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

 

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

 

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

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

 

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

 

<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{ width:200px; height:10px; border:1px solid #60F;}
#nei{ width:0px; height:10px; background-color:#F33; float:left}
</style>

 

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

posted @ 2016-09-23 17:10  厚爱无需我多言。  阅读(114)  评论(0编辑  收藏  举报