Tip: You can modify some of the code before running
<! DOCTYPE html> <ptml> <pead> <meta charset= "Utf-8"/> <title> JavaScript to achieve content switching effect </ti tle> <style type= "Text/css" > *{margin:0;padding:0;} body{font:12px/1.5 Tahoma, Arial, 5b8b4f53, Sans-serif; UL, ol {List-style:none;} a {text-decoration:none;} a:hover {text-decoration:underline;} img {border:0;} . section{width:350px; margin:0 Auto; #content-slider{border:1px solid #666; height:200px;width:350px; margin-top:50px;} #content-slider-inside{height:200px;overflow:hidden;} #content-slider-inside li{background-color: #ccc; height:200px;width:350px;text-align:center;font-size:100px; Line-height:200px;color: #666;} #navigation {margin:10px 0 0 0;float:right;} #navigation li {border:solid 1px #ccc; float:left;width:20px;height:20px;line-height:20px;text-align:center; margin-left:5px;} #navigation Li A, #navigation Li A:link, #navigation li a:visited {color: #666;d isplay:block;height:20px;} #navigatioN li A:hover, #navigation Li A:focus, #navigation li a:active {background: #666; color: #fff;} </style> </pead> <body> <div class= "section" > <div id= "Content-slider" > <ul id= "Content-slider-inside" > <li id= "one" >1</li> <li id= "two" ">2</li> <li id=" three ">3</li> <li id=" four ">4</li> <li id= "Five" >5</li> </ul> </div> <ul id= "Navig" ation "> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </p Tml></td> </tr> </table>
Tip: You can modify some of the code before running
