今天学习了HTML加上CSS 简单JS实现图片墙代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> 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> <style type="text/css"> body,ul,ol{margin: 0;padding: 0;} li{list-style: none;} img{border: none;vertical-align: top;} #box{width: 470px;height: 150px;position: relative;margin: 30px auto;overflow: hidden;} ul{width: 470px;position: absolute;left: 0;top: 0;z-index: 1;} ul li{width: 470px;display: none;} ol{z-index: 2;width: 120px;position: absolute;right: 10px;bottom: 10px;} ol li{width: 20px;height: 20px;float: left;margin: 0 2px;display: inline;;background: #fff;color: #f60;line-height: 20px;text-align: center;} ol .active{background-color: #f60;color: #fff;} </style> </head> <body> <div id="box"> <ul> <li style="display: block"><img src="1.jpg"></li> <li><img src="2.jpg"></li> <li><img src="3.jpg"></li> <li><img src="4.jpg"></li> <li><img src="5.jpg"></li> </ul> <ol> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>
实现简单效果也不错