Tip: you can modify some 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>Js is very good at switching Image slides</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<pead>与</pead>之间--><style type="text/css">/* Author: footprint to the right: www.ilovespringna.com */body {font: 14px/1.4 Arial; text-align: center;} h1 {font: 18px/1.6 Arial;} # pram {width: 600px; margin: 0 auto; margin-top: 30px; text-align: center; border-top: 1px solid # ddd; font: 14px/1.4 "Comic Sans MS ", "Courier New", serif;} # time, # intertime {width: 35px; text-align: right ;}. new {color: red;}/* picChange Image Switch special effect CSS */div # win {position: relative; margin: 0 auto; width: 433px; height: 178px; overflow: hidden; border: 1px solid #666;} ul # picChange {width: 100%; height: 100%; margin: 0; padding: 0; list-style: none ;} ul # picChange li {} ul # picChange li img {position: absolute; top: 0; left: 0; display: none;} ul # picChangeIndex {position: absolute; z-index: 999; margin: 0; padding: 0; right: 8px; bottom: 8px; list-style: none;} ul # picChangeIndex li {list-style: none; width: 16px; height: 16px; border: 1px solid # f90; float: left; * display: inline; text-align: center; line-height: 16px; margin-right: 3px; cursor: pointer;} ul # picChangeIndex li a {text-decoration: none; font: 13px Arial; color: #666; display: block; width: 16px; height: 16px; background: # fff5e1;} ul # picChangeIndex li a: hover {font-weight: bold; color: #000; font-size: 14px;} ul # picChangeIndex li. select {color: # fff; font-size: 14px; background: # fd8f07 ;}# picDescBg {position: absolute; height: 34px; width: 100%; left: 0; bottom: 0; background: #000; z-index: 997 ;}# picDesc {position: absolute; height: 34px; line-height: 34px; text-indent: 1em; text-align: left; left: 0; bottom: 0; color: #000; z-index: 998 ;}</style></pead><body><!--把下面代码加到<body>与</body>之间--><p>PicChange Image switching effect-version: 0.3.2-2010.5.31 modification</p><div id="win"><ul id="picChange"><li></li><li></li><li></li><li></li></ul></div><div id="pram"><p >Sample Code: $ pic ("picChange"). picChange ({changeStyle: "fade", time: 250 });</p><p id="show">Current Mode: fade-out effect, 250 ms.</p><label>Switchover effect</label><select name="changeStyle" id="changeStyle"><option value="fade" selected="selected">Fade out effect</option><option value="move">Removal effect</option><option value="wheel">Linkage effect</option><option value="none">Direct switch effect</option></select><label>Switch time</label><input name="time" id="time" value="250">MS;<br><br> <label>Switch direction</label><select name="direction" id="direction"><option value="up" selected="selected">Upper</option><option value="down">Lower</option><option value="left">Left</option><option value="right">Right</option></select> <label>Click to switch</label><input type="checkbox" name="isclick" id="isclick">(Switch when the mouse stays by default)<br><br><label>Timed switching<sup class="new">[New!]</sup></label><input type="text" name="intertime" id="intertime" value="5000">MS (do not switch if left empty)<br><br><input type="button" value="更改图片切换模式" onclick="func()"></div><script type="text/javascript" src="http://www.zzsky.cn/effect/images/201005312150//picChange-0.3.2.js"></script><script type="text/javascript">// Directly switch results // $ pic ("picChange "). picChange (); // fade out Effect $ pic ("picChange "). picChange ({changeStyle: "fade", time: 250, interTime: 5000}); // Move Up effect // $ pic ("picChange "). picChange ({changeStyle: "move", time: 250, direction: "up"}); // link up effects // $ pic ("picChange "). picChange ({changeStyle: "wheel", time: 250, direction: "up"}); // The following is a page test function, not a usage of picChange, use function func () {// restore the original html code var my_time = document. getElementById ("time "). value; var my_changeStyle = document. getElementById ("changeStyle "). value; var my_direction = document. getElementById ("direction "). value; var my_isClick = document. getElementById ("isclick "). checked; var my_intertime = document. getElementById ("intertime "). value; // alert (my_time + "" + my_changeStyle + "" + my_direction + "" + my_isClick); $ pic ("picChange "). picChange ({changeStyle: my_changeStyle, time: my_time, direction: my_direction, isClick: my_isClick, interTime: my_intertime}); var tmpImg = document. getElementById ("picChange "). getElementsByTagName ("img"); var tmpLength = tmpImg. length; for (var n = 0; n<tmpLength;n++){tmpImg[n].style.top = "";tmpImg[n].style.left = "";setAlpha(tmpImg[n],100);if(n==0)tmpImg[n].style.display = "block";elsetmpImg[n].style.display = "";}var showText = "改变成功！当前模式：";if(my_changeStyle == "move" || my_changeStyle == "wheel"){showText += "向"+document.getElementById("direction").options[document.getElementById("direction").selectedIndex].text+document.getElementById("changeStyle").options[document.getElementById("changeStyle").selectedIndex].text;showText += "，"+my_time+"毫秒，每隔"+my_intertime/1000+"秒切换。";}else if(my_changeStyle == "fade"){showText += document.getElementById("changeStyle").options[document.getElementById("changeStyle").selectedIndex].text;showText += "，"+my_time+"毫秒，每隔"+my_intertime/1000+"秒切换。";}else{showText += document.getElementById("changeStyle").options[document.getElementById("changeStyle").selectedIndex].text;}document.getElementById("show").innerHTML = showText;}</script></body></ptml>
Tip: you can modify some code before running
