<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/> <Title> untitled document </title> <Style type = "text/css"> * {Margin: 0; padding: 0 ;} Ul, li {list-style: none ;} . Mid {margin: 0 auto ;} . Area { Width: 240px; height: 270px; Overflow: hidden; background: #999; Margin-top: 150px; position: relative; } # Pic_list { Position: relative; } # Pic_list li { Position: absolute; visibility: hidden; } # Pic_list li. show { Visibility: visible; } # Pic_list li img { Vertical-align: middle; } . Button { Width: 240px; height: 20px; Line-height: 20px; background: # ccc; Position: absolute; bottom: 0px; } # Button { Float: right; } # Button li { Float: left; width: 20px; height: 20px; Text-align: center; margin: 0 3px; Font-family: "Arial"; font-size: 12px; Color: # fff; background: #000; } # Button li. current { Background: # f00; cursor: pointer; } </Style> </Head> <Body> <Div class = "area mid"> <Div id = "imgbox" class = "bbbb"> <Ul id = "pic_list" class = "aaaa"> <Li class = "show" id = "one"> </Li> <Li id = "two"> </Li> <Li id = "three"> </Li> <Li id = "four"> </Li> <Li id = "five"> </Li> </Ul> </Div> <Div class = "button" class = "dddd"> <Ul id = "button" class = "cccc"> <Li class = "current" id = "but_one"> 1 </li> <Li id = "but_two"> 2 </li> <Li id = "but_three"> 3 </li> <Li id = "but_four"> 4 </li> <Li id = "but_five"> 5 </li> </Ul> </Div> </Div> <Script type = "text/javascript"> (Function (){ Var imgbox = document. getElementById ("imgbox "); Var pic_list = document. getElementById ("pic_list "); Var pics = pic_list.getElementsByTagName ("li "); Var button = document. getElementById ("button"). getElementsByTagName ("li "); Var p; Var start; Function autoplay (start) {for (I = start; I <button. length; I ++ ){ // Set the start value to the start parameter. (Function (){ Var p = I; // Assign the I. I value to p equal to 0, 1, 2, 3, 4; Button [I]. onmouseover = function change (){ // Button [0], button [1], button [2], button [3], button [4] // Onmouseover can trigger a function; For (j = 0; j <this. parentNode. childNodes. length; j ++ ){ // Start with this (the element of the current trigger event), all the child nodes of the parent node // The length value is the highest value to start traversing .; This. parentNode. childNodes [j]. className = ""; // Start with this (the element of the current trigger event) // The className of all child nodes of the parent node is empty. Dangerous and use with caution .; } This. className = "current "; // This. That is, the className of the element currently triggering onmouseover is "current "; For (m = 0; m <pics. length; m ++ ){ // Traverse pics with the maximum value of pics. length .; Pics [m]. className = ""; // Clear the className of all elements in the pics array; If (m = p ){ // When m = p (p = I) SO m = I, the following function is triggered Pics [m]. className = "show "; // The className value of the mth element of pics is show; m is equal to I here; } } } })(); } } Autoplay (0 ); })(); </Script> </Body> </Html> |