Home > Developer > JavaScript
Js achieves image carousel album with transition gradient effect (compatible with IE, ff), jsff
This article introduces how to implement image carousel album in js with a transitional gradient effect. It will be shared with you for your reference. The details are as follows:
The idea is simple. Use two attributes to save the current image and the previous image, and use two timers to control the transparency and current transition image respectively.
<HTML> <HEAD> <TITLE> </HEAD> <style> # cnt {width: 100%; height: 80% ;}. ctrl {text-align: center; border: 1px solid gray; font-size: 12px; cursor: pointer ;}</style> <script defer = 'defer '> <! -- Var curOpac = 0; var filterTimer; var isIE =/internet explorer/I. test (window. navigator. appName); function MyScroll (cnt, control) {this. data = []; // path for storing images this. interval = 3000; // The interval between transition times (transition time + image display time) this. timer; // timer: controls the currently displayed image this. container = cnt; this. curFrame = 0; this. oldFrame = 0; this. controls = control; // The set of buttons Global = this; // gets the object pointer this. run = function () {this. timer = window. setInterval ("Global. showFrame () ", this. interval);} // button handler this. go = function (I) {curOpac = 0; // The transparency is 0 this. curFrame = I; // the image to be transitioned this. stop (); // clear the timer this. showFrame (); // The current image transitions this. run (); // loop playback} this. stop = function () {window. clearInterval (this. timer); window. clearInterval (filterTimer);} this. showFrame = function () {// set the current button style this. controls [this. oldFrame]. style. backgroundColor = "white"; this. controls [this. curFrame]. style. backgroundColor = "gray"; if (isIE) this. container. style. filter = "alpha (opacity = 0)"; else this.container.style.css Text = "-moz-opacity: 0"; this. container. innerHTML = this. data [this. curFrame]; filterTimer = window. setInterval ("blend ()", 100); this. oldFrame = this. curFrame; this. curFrame ++; if (this. curFrame = this. data. length) {this. curFrame = 0 ;}}// added transparency function blend () {curOpac + = 10; if (isIE) Global. container. style. filter = 'Alpha (opacity = '+ curOpac +') '; else Global.container.style.css Text = "-moz-opacity:" + curOpac/100.0; if (curOpac = 100) {curOpac = 0; window. clearInterval (filterTimer) ;}/// start function startIt () {var imgArr = []; // create four image objects and save the image path for (var I = 0; I <4; I ++) {imgArr [I] = new Image (); imgArr [I]. src = "images/banner" + (I + 1) + ". jpg ";} var controlArr = $ (" mainTb "). getElementsByTagName ("span"); for (var I = 0; I <controlArr. length; I ++) {controlArr [I]. tag = I; controlArr [I]. onclick = function () {myScroll. go (this. tag) ;}} var myScroll = new MyScroll ($ ("cnt"), controlArr); myScroll. data. push (" </script> <BODY> <table width = "300" height = "100" id = "mainTb"> <tr> <th rowspan = "4"> <div id = "cnt"> </div> </td> <td width = "15"> <span class = "ctrl"> 1 </span> </td> </tr> <td> <span class = "ctrl"> 2 </span> </td> </tr> <td> <span class = "ctrl"> 3 </span> </td> </tr> <td> <span class = "ctrl"> 4 </span> </ td> </tr> </table> </BODY> </HTML>
The above is all the content of this article, and I hope it will help you learn javascript programming.
Articles you may be interested in:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
