With the automatic playback function, image display not only has the effect of fading and auto scaling, but also feels like playing a movie!
<Script type = "text/javascript" src = "http://img.jb51.net/online/slide/slide.js? 1.1.9 "> script <script defer =" defer "type =" text/javascript "> <! -- Var viewer = new PhotoViewer (); viewer. add ('HTTP: // img.jb51.net/online/slide/011.jpg'); viewer. add ('HTTP: // img.jb51.net/online/slide/021.jpg'); viewer. add ('HTTP: // img.jb51.net/online/slide/03.jpg'); viewer. add ('HTTP: // img.jb51.net/online/slide/061.jpg'); viewer. add ('HTTP: // img.jb51.net/online/slide/051.jpg'); // --> script <style type = "text/css"> <! --. Slideshow a {margin-right: 5px; margin-left: 5px; text-decoration: none ;} --> </style> <center> <p class = "Slideshow"> </p> </center>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Controllable fade-in:
<Html> <body> <p id = "testMessage" style = "border: 2px solid skyblue; width: 300px; height: 60px "> </p> <p id =" photoContrl "style =" display: none "> <button onclick =" prevPhoto () "> Previous </button> <button onclick =" nextPhoto () "> Next </button> <button onclick =" autoPlay () "id =" pp "> Play </button> <button onclick =" stopPlay () "> Stop </button> </p> <p style =" border: 1px solid gold; width: 600px; background: dodgerblue "> </p> </body> </ptml> script function tM (Message) {$ ("testMessage "). innerHTML = Message} function dR (topr) {document. write (topr)} function $ (eleId) {return document. getElementById (eleId)} // pre-loaded image var imasrc = new Array (" http://img.jb51.net/online/slide/10254068.jpg "," http://img.jb51.net/online/slide/10254629.jpg "," http://img.jb51.net/online/slide/10255187.jpg "," http://img.jb51.net/online/slide/10255626.jpg "," http://img.jb51.net/online/slide/10260076.jpg "," http://img.jb51.net/online/slide/10260471.jpg "," http://img.jb51.net/online/slide/10261022.jpg "," http://img.jb51.net/online/slide/10261479.jpg ") // Write the Array var preIma = new Array () var dB = new Date () for (I = 0; I <imasrc. length; I ++) // preload all images {preLoadImg (I)} function preLoadImg (imgIndex) // preload the specified Image {preIma [imgIndex] = new Image () preIma [imgIndex]. imgReadyStatus = false preIma [imgIndex]. imgIndex = imgIndex preIma [imgIndex]. onload = imgLoad preIma [imgIndex]. onerror = imgError preIma [imgIndex]. onabort = imgAbort preIma [imgIndex]. src = imasrc [imgIndex]} funct Ion imgLoad () // pre-Load completed {this. imgReadyStatus = true} function imgError () // pre-loading failed {preLoadImg (this. imgIndex)} function imgAbort () // preload cancel {preIma. splice (this. imgIndex, 1)} var checkAgain function checkImgReadyStatus () // retrieves the loading status {var imgReadyStatus = true var persent = 0 var dE = new Date () for (I = 0; I <preIma. length; I ++) {if (! PreIma [I]. imgReadyStatus) {imgReadyStatus = false} else {persent ++} tM ("complete:" + (persent/preIma. length * 100 ). toFixed (2) + "% <br> load:" + persent + "image <br> time consumed:" + (dE-dB)/1000 ). toFixed (0) + "seconds") // display progress if (imgReadyStatus) {$ ("photoContrl "). style. display = "block" autoPlay () clearTimeout (checkAgain)} else {checkAgain = setTimeout (checkImgReadyStatus, 1000) // retrieval frequency} checkImgReadyStatus () // slide effect var photoIndex = 0 // initial Convert image index var opacity = 10 // initialize transparency var direct = "--" // initialize the transparency vector var doPlay // define the playback var doAutoPlay // define the automatic playback function prevPhoto () {play (-1)} // flip function nextPhoto () {play (1)} // flip function autoPlay () // play automatically {if (doAutoPlay) {clearInterval (doAutoPlay) doAutoPlay = null $ ("pp "). innerHTML = "Play"} else {play (1) doAutoPlay = setInterval ("play (1)", 3000) // defines the automatic playback frequency $ ("pp "). innerHTML = "Pause"} function stopPlay () // stop playing {ClearInterval (doAutoPlay) doAutoPlay = null photoIndex = 0 play (0) $ ("pp "). innerHTML = "Play"} function play (act) // executes the action {if (preIma. length! = 0) {if (doPlay) {clearInterval (doPlay)} doPlay = setInterval (switchPhoto, 10) photoIndex = (photoIndex + act + preIma. length) % preIma. length} function switchPhoto () // switch the photo {eval ("opacity" + direct) setOpa (opacity) if (opacity <= 1) {direct = "++" $ ("photo "). src = preIma [photoIndex]. src} else if (opacity >=10) {direct = "--" clearInterval (doPlay)} function setOpa (opacity) // change the transparency {if ($ ("photo "). style. fil Ter! = Null) {$ ("photo "). style. filter = "alpha (opacity =" + opacity * 10 + ")"} else {$ ("photo "). style. opacity = opacity/10} script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]