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> <title>javascript imitation flash picture slide switch effect </ title> <meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <!--Add the following code to <pead> and </pead>--> <style type= "Text/css" > Body{background: #000; color: #fff;} img,a img{border:none;} a{ Text-decoration:none; Color: #fff;} A:hover{text-decoration:underline color: #fff; main{width:950px; height:1000px; padding:0 6px;} Fcnt{display:block height:342px; width:764px margin:10px auto; border:4px solid #222; position:relative; overflow: Hidden;} fcnt. mimg{float:left; width:610px height:340px; overflow:hidden; border:1px solid #470304; fcnt mimg: none;} . mimg img{width:610px; height:340px;} . fcnt ul{float:right; width:152px height:340px; *html fcnt; ul{position:absolute; right:0; top:0ht:340px;} . fcnt li{display:block height:82px width:150px; margin-bottom:5px cursor:pointer Overflow:hidden fcnt; width:150px; Height:82px;filter:alpha (opacity=70); -moz-opacity:0.7; opacity:0.7;} . fcnt li.cur img{width:142px height:75px; margin:4px 0 0 4px;filter:alpha (opacity=100);-moz-opacity:1; opacity:1;} Tri{position:absolute top:0; right:2px z-index:1000; width:155px; height:82px; cursor:pointer;} *html #tri { Background:none;} . fcnt Dl{position:absolute; bottom:1px; left:0px; width:611px; height:80px; display:none; Text-align:center; font-size:22px; Font-family: "Bold"; font-weight:900;} . fcnt dd{line-height:24px; text-align:center font-size:14px;} *html. fcnt dl{background:none;} </style> < Script type= "Text/javascript" src= "Http://www.zzsky.cn/effect/images/jquery-1.2.6.pack.js" ></script> <script type= "Text/javascript" >/*javascript Document by Trance *mail:trance2005@163.com *qq:397902738 *date:2 008-11-(document). Ready (function () {//slide Var j=1 var mytime=false var fot=200;//current picture vanishing time Var fin=300;//new picture render time Var amt= 300;//triangle flag sliding time var speed=3000;//automatic playback interval var maxpic=4;//toggle picture Number $ ("#ppt"). Find ("Li"). each (function (i) {$ ("#ppt"). Find (" Li "). EQ (i). MouseOver (function () {var cur=$ (' #mpc '). Find (" Div:visible "). Prevall (). length; if (i!==cur) {j=i; $ ("#mpc"). Find ("Div:visible"). Fadeout (Fot,function () {$ (' #mpc '). Find ("div"). EQ (i) fadeIn (Fin);}); $ ("#tri"). Animate ({"Top": i*87+ "px"},amt,current (this, "Li")); $ ("#ppt"). Find ("Dl:visible"). Slideup (Fot,function () {$ (' #ppt '). Find ("DL"). EQ (i) Slidedown (Fin);}); }})//marks the current function present (Ele,tag) {$ (ele). addclass ("cur"). Siblings ("Removeclass"); //play automatically, you can delete this section of $ (' #imgnav ') if you don't need to. Hover (function () {if (mytime) {clearinterval (mytime); }},function () {mytime = SetInterval (function () {$ ("#ppt"). Find ("Li")-eq (j). MouseOver (); j + +; if (J==maxpic) {j=0;} }, speed); }); Auto start var mytime = setinterval (function () {$ ("#ppt"). Find ("Li")-eq (j). MouseOver (); j + +; if (j==maxpic) {j=0;} }, speed); }) </script> </pead> <body> Preview effect when the lower left corner will be prompted with errors, and do not see the effect, refresh it can be, of course, in the actual use, there will not be such a problem. <br> <!--Add the following code to <body> and </body>--> <div class= "main" > <div class= "fcnt" id= "ppt" > <div class= "mimg" id= "MPC" > <div ></div> <div></div> <div></div> <div></div> </div> <dl > <dt > A, Merry christmas! Merry Christmas! </dt> <dd> Everyone Merry Christmas, Peace Night Bless you, Christmas Eve received the right gift, peace and happiness! </dd> </dl> <dl> <dt> II, Merry christmas! Merry Christmas! </dt> <dd> Everyone Merry Christmas, Peace Night Bless you, Christmas Eve received the right gift, peace and happiness! </dd> </dl> <dl> <dt> III, Merry christmas! Merry Christmas! </dt> <DD> Everyone Merry Christmas, Peace Night Bless you, Christmas Eve received the right gift, peace and happiness! </dd> </dl> <dl> <dt> IV, Merry christmas! Merry Christmas! </dt> <dd> Everyone Merry Christmas, Peace Night Bless you, Christmas Eve received the right gift, peace and happiness! </dd> </dl> <div id= "tri" ></div> <ul> <li class= "cur" ;</li> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </ptml>
Tip: You can modify some of the code before running
