HTML+CSS+JS简单的图片变化 发表于 2017-11-09 | 分类于 HTML 今天在写网站的时候,(当然也是在学js的同时),为了是网站的页面更好看,使布局添加了一些js动态的效果 今天分享一个简单的图片变化的HTML代码; 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990<html><head><meta charset="utf-8"><title ></title><style>img{ border:none; vertical-align:top;}#box{ width:800px; height:300px; position:relative; margin:30px auto; overflow:hidden;}ul{ width:800px; position:absolute; left:0; top:0; z-indox:1;}ul li{ width:800px; display:none;}ol{ z-index:2px; width:120px;position: absolute;right:10px; bottom:10px;}ol li{ list-style-type:none; width:20px; height:20px; float:left; margin: 0 2px; diaplay:inline; background:#fff; color:#f60; line-height:20px; text-align:center;}ol .active{ background:#f60; color:#fff;}</style><script> window.onload=function(){ var oUl=document.getElementsByTagName('ul')[0]; var aLiUl=oUl.getElementsByTagName('li'); var oOl=document.getElementsByTagName('ol')[0]; var aLiOl=oOl.getElementsByTagName('li'); for(var i=0;i<aLiOl.length;i++){ aLiOl[i].index=i; aLiOl[i].onmouseover=function(){ for(var i=0;i<aLiOl.length;i++){ aLiOl[i].className=''; aLiUl[i].style.display='none'; } this.className='active'; aLiUl[this.index].style.display='block'; } }}</script></head><body><div id="box"> <ul> <li style="display: block;filter:alpha(opacity=100);opacity:1;"><img src="img/1.png"></li> <li><img src="img/2.png"></li> <li><img src="img/3.png"></li> <li><img src="img/4.png"></li> </ul> <ol> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ol></body></html>