Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> Untitled document </title> </pead> <style> #bannerimg {list-style-type:none; padding:0; margin:0; height:260px; width:780px; margin:0 Auto; #bannerimg Li img{padding:0; margin:0; width:780px; height:260px; Position:absolute; } #image_num {z-index:4; List-style-type:none; Position:absolute; margin-top:-38px; margin-left:600px; } #image_num li {float:left; PADDING:2PX 6px; border:1px solid #d8c9ce; Background: #fff; margin:0 2px; #image_num Li a {text-decoration:none; Color: #9c9c9c; Font-weight:bold; font-size:14px; } </style> <body> <ul id= "bannerimg" > <li></li> <li></li> <li></l i> </ul> <ul id= "Image_num" &Gt <li>1</li> <li>2</li> <li>3</li> </ul> </body> </ptml> < Script type= "Text/javascript" src= "http://code.jquery.com/jquery-1.7.1.min.js" ></script> <script type= "Text/javascript" > var i = 0; var time = 3000; var len = $ ("#bannerimg li"). length; $ ("#image_num li"). EQ (0). CSS ("Background", "#f00"); function Showimg () {$ ("#img_" +i). Animate ({opacity:0},600); i++; if (I==len) i=0; $ ("#img_" +i). Animate ({opacity:1},600); $ ("#image_num li"). EQ (i). CSS ("Background", "#f00"). Siblings (). CSS ("Background", "#fff"); } timer=setinterval (Showimg,time); $ (function () {$ (' #image_num Li '). MouseOver (function () {clearinterval (timer); $ (this). CSS ("Background", "#f00"). Siblings (). CSS ("Background", "#fff"); $ ("#bannerimg li img"). EQ ($ (this). Index ()). Animate ({opacity:1},600); }); $ (' #image_num Li '). Mouseout (function () {$ ("#bannerimg li img"). EQ $ (this). index ()). Animate ({opacity:0},600); Timer=setinterval (Showimg,time); }); }) </script></td> </tr> </table>
Tip: You can modify some of the code before running
