图片自换（图片）

标签：style   blog   http   io   color   ar   os   sp   div   

js代码：

i=16  /*图片要命名为数字，从17开始*/
function img()
{
   i++
   if(i==23){
   i=17
}
   document.getElementById(‘photo‘).src="images/"+i+".jpg"; /*图片的格式要注意*/
   setTimeout("img()",6000)
}

function onClickNum(i)
{  

    document.getElementById(‘photo‘).src="images/"+i+".jpg";    注：图片和HTML文档必须要在同一个根目录下。

}

CSS代码：  

#shang {
    height: 405px;
    width: 100%;
}
#num { 

  height: 65px;
  width: 980px;
  position: relative;
  top: -75px;
  left: -1px;
  background-color: #000;
  opacity: 0.6;
  filter:alpha(opacity=50);  /*在IE中实现透明度*/
  -moz-opacity:0.5;   /*在火狐浏览器中实现半透明*/
}

#num li{ 
    float: left;
   width: 125px;
   height: 49px;
   line-height: 58px;
   list-style: none;
   margin-top: 6px;
   margin-right: 37px;
}
#num li a{
   display:block;  /*块元素*/
   opacity:0.7;
}
#num li a:hover{
   border: 3px solid #39F;  /*边框*/
   opacity:1;
}

HTML代码：

<div id="shang">
    <img src="images/18.jpg" width="1000" height="400" id="photo" border="0">
   <div id="num">
       <ul>
           <li><a href="#" onmouseover="onClickNum(17)"><img src="../jiudian/18.jpg" width="120" height="48" /></a></li>
           <li><a href="#" onmouseover="onClickNum(18)"><img src="../jiudian/17.jpg" width="120" height="48" /></a></li>
           <li><a href="#" onmouseover="onClickNum(19)"><img src="../jiudian/19.jpg" width="120" height="48" /></a></li>
           <li><a href="#" onmouseover="onClickNum(20)"><img src="../jiudian/20.jpg" width="120" height="48" /></a></li>
           <li><a href="#" onmouseover="onClickNum(21)"><img src="../jiudian/21.jpg" width="120" height="48" /></a></li>
          <li><a href="#" onmouseover="onClickNum(22)"><img src="../jiudian/22.jpg" width="120" height="48" /></a></li>
     </ul>
  </div>
</div>

图片自换（图片）

标签：style   blog   http   io   color   ar   os   sp   div   

原文地址：http://www.cnblogs.com/yunian/p/4083605.html