Tip: you can modify some code before running
<html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">* {Margin: 0; padding: 0 ;}# gallery {width: 500px; background: orange; margin: 55px auto; position: relative ;}# gallery ul {list-style: none; width: 500px; height: 25px; background: url (images/bg.png) no-repeat; text-align: right; position: absolute; bottom: 0; left: 0 ;}# gallery li {float: right ;}# gallery # flower {display: block ;}# gallery li a {float: left; width: 40px; height: 25px; line-height: 25px; border-left: 1px solid # fff; font-size: 13px; text-align: center; text-decoration: none; color: #000 ;} # gallery li a: hover {background: # aeffdc;} # description {color: blue; position: absolute; top: 0; font-size: 13px ;}</style> </head> <body> <div id="gallery"> <ul id="list"> <li>Flowers</li> <li>Grass</li> <li>Leaf</li> <li>Sky</li> </ul> <p id="description">Image description!</p> </div> </body><script type="text/javascript">Var n = 0; function showpic (whichpic) {var s = whichpic. getAttribute ("href"); var flower = document. getElementById ("flower"); flower. setAttribute ("src", s); var text = whichpic. getAttribute ("title"); var description = document. getElementById ("description"); description. firstChild. nodeValue = text;} var _ = function (id) {return document. getElementById (id);} var l = _ ("list "). getElementsByTagName ("a"); for (var I = l. length-1; I> = 0; I --) {l [I]. onclick = function () {return false ;}} function auto () {showpic (l [n ++ % l. length]); setTimeout (auto, 500);} auto ();</script></html>
Tip: you can modify some code before running
