Home > Developer > JavaScript
Simple instances of native JS to achieve image carousel and fade-in effect, and js fade-In instances
Recently, I cannot raise my interest in css because I used to have a hard time playing images, so I spent some time getting familiar with js. Then one path goes to the dark, And jquery and js are used to write the carousel and image fades in. It will take a long time to study in the future. I hope that I will go further on the road ahead )′
In terms of principle, there are many online tutorials, in simple terms.
Fade-in and fade-out, but only fade-in is used here. For each light image, we set its display to block, and the others to none. Therefore, there is only one image that actually exists and occupies the position of the Document Stream. Before you set the image display mode, increasing the image transparency will give you a sense of indifference.
In fact, there is another key point in js Code. The closure is used in the Code. Therefore, we have a little understanding of the closure. Let's say a few more here:
The official explanation of the closure is: the closure is an expression (usually a function) with many variables and an environment bound to these variables, so these variables are part of the expression.
Simple statement:
When function a's internal function B is referenced by a variable outside function a, a closure is created.
More thorough. The so-called "closure" refers to defining another function in the constructor as the method function of the target object, and the method function of this object references temporary variables in the outer function body in turn. This allows the target object to indirectly retain the temporary variable value used by the original constructor as long as it can maintain its method throughout the lifetime.
Although the call to the initial constructor has ended, the name of the Temporary Variable disappears, but the value of the variable can always be referenced in the method of the target object, this value can only be accessed in this way. Even if the same constructor is called again, only new objects and methods are generated. The new temporary variables only correspond to new values, which are independent of those called last time.
The following function is a closure function. Why use a closure? Isn't a normal function acceptable? It is really not. Here the function of the closure is to keep reference to the flag. If no closure is needed, as long as the function is executed once, that is, once the flag is executed, the local variable will be cleared by the garbage collection mechanism, the flag variable is referenced by the function in the intermittent call. During the second execution, the flag will lose its value and the function body cannot execute the correct result. When I started to contact the front-end, I thought the closure was dispensable. The truth is, this is really important!
Var setVal = function (s, flag) {return function () {pos = Math. abs (parseInt (pic. style [point]); if (flag> 0) {// the current point is greater than the coordinate of the target point, the screen moves to the right, and the left value decreases by pic. style [point] =-Math. floor (pos + (parseInt (s * sSingleSize)-pos) * speed) + 'px';} if (flag <0) {pic. style [point] =-Math. ceil (pos + (parseInt (s * sSingleSize)-pos) * speed) + 'px';} if (pos = (sSingleSize * s) {now = s; clearInterval (interval );}}};
The following code is used:
Html
<!DOCTYPE html>Css
Body {font-size: 12px;} ul, li {padding: 0; margin: 0; list-style: none ;}# picBox {width: 610px; height: 205px; margin: 50px auto; overflow: hidden; position: relative; font-size: 0;}/* carousel image */# picBox. show_pic {width: 3050px; position: absolute ;}# picBox. show_pic li {float: left; width: 610px; height: 205px; display: none;/* display: none; */} # picBox. show_pic li. on {display: block;} # picBox. show_pic li img {display: block; width: 610px; height: 205px;} # picBox. icon_num {position: absolute; bottom: 12px; right: 10px; z-index: 10 ;}# picBox. icon_num li {float: left;/* background: url (/uploadfile/200912/28/FA15567738.gif) no-repeat-15px 0; */width: 16px; height: 16px; font-size: 16px; color: # 39F; text-align: center; cursor: pointer; margin-right: 5px;} # picBox. icon_num li. on {background: #000; opacity: 0.5;}/* background */. bg {z-index: 1; position: absolute; bottom: 0; height: 40px; width: 610px; background: #000; opacity: 0.6; filter: alpha (opacity = 60) ;}# picBox. show_des {width: 300px; height: 18px; position: absolute; bottom: 11px; left: 15px; color: # fff; z-index: 10;} # picBox. show_des li {display: none; line-height: 18px; font-size: 18px;} # picBox. show_des li. on {display: block ;}Js
Function cleanWhitespace (oEelement) {for (var I = 0; I <oEelement. childNodes. length; I ++) {var node = oEelement. childNodes [I]; if (node. nodeType = 3 &&! /\ S /. test (node. nodeValue) {node. parentNode. removeChild (node) ;}}// carousel code this. layerGlide = function (auto, oBox, sSingleSize, second, fSpeed, point) {var interval, timeout; // two timers var pos; // The absolute value of the currently positioned coordinate shaping var time = second, now = 0; // time interval at which the image is moved, now the index value of the current image var speed = fSpeed // The moving speed var delay = second * 1000; // The interval between switching the image var picBox = document. getElementById (oBox); cleanWhitespace (picBox); var Pic = picBox. childNodes [0]; // image list var des = picBox. childNodes [2]. getElementsByTagName ("li"); // image list var con = picBox. childNodes [3]. getElementsByTagName ("li"); var sum = con. length; var setVal = function (s, flag) {return function () {pos = Math. abs (parseInt (pic. style [point]); if (flag> 0) {// the current point is greater than the coordinate of the target point, the screen moves to the right, and the left value decreases by pic. style [point] =-Math. floor (pos + (parseInt (s * sSingleSize)-pos) * speed) + 'px' ;} If (flag <0) {pic. style [point] =-Math. ceil (pos + (parseInt (s * sSingleSize)-pos) * speed) + 'px';} if (pos = (sSingleSize * s) {now = s; clearInterval (interval) ;}}; var changeTo = function (num) {for (var I = 0; I <sum; I ++) {con [I]. className = ""; des [I]. className = "" ;}; con [num]. className = "on"; des [num]. className = "on"; var flag = Math. abs (parseInt (pic. style [point])-sSingleSize * num; Interval = setInterval (setVal (num, flag), time); // bkg. hide (). fadeIn ();} function autoGlide () {clearTimeout (interval); now = (parseInt (sum)-1 ))? 0: (now + 1); changeTo (now); timeout = setTimeout (autoGlide, delay);} function isAuto () {if (auto) {timeout = setTimeout (autoGlide, delay) ;};} isAuto (); // start automatic carousel for (var I = 0; I <sum; I ++) // navigation button {con [I]. onmouseover = (function (I) {return function () {clearTimeout (timeout); clearInterval (interval); changeTo (I); this. onmouseout = isAuto () ;}}) (I) }// fade in and out this. layerFader = function (auto, oBox, sec Ond, count, speed) {var interval, timeout; // two timers var now = 0; // time interval for moving an image, now the index value of the current image var delay = second * 1000; // interval between each image switching var picBox = document. getElementById (oBox); cleanWhitespace (picBox); var pic = picBox. childNodes [0]. getElementsByTagName ("li"); var des = picBox. childNodes [2]. getElementsByTagName ("li"); var con = picBox. childNodes [3]. getElementsByTagName ("li"); var sum = con. le Ngth; function fadeIn (elem) {setOpacity (elem, 0); // The initial full transparency for (var I = 0; I <= count; I ++) {// transparency change 20*5 = 100 (function (I) {var level = I * 5; // transparency change value setTimeout (function () {setOpacity (elem, level)}, I * speed);}) (I) ;}} function setOpacity (elem, level) {// sets the transparency if (elem. filters) {elem. style. filter = "alpha (opacity =" + level + ")";} else {elem. style. opacity = level/100;} var changeTo = fu Nction (num) {for (var I = 0; I <sum; I ++) {con [I]. className = ""; des [I]. className = ""; pic [I]. className = "" ;}; fadeIn (pic [num]); con [num]. className = "on"; des [num]. className = "on"; pic [num]. className = "on"; // bkg. hide (). fadeIn ();} function autoGlide () {clearTimeout (interval); now = (parseInt (sum)-1 ))? 0: (now + 1); changeTo (now); timeout = setTimeout (autoGlide, delay);} function isAuto () {if (auto) {timeout = setTimeout (autoGlide, delay) ;};} isAuto (); // start automatic carousel for (var I = 0; I <sum; I ++) // navigation button {con [I]. onmouseover = (function (I) {return function () {clearTimeout (timeout); // clearInterval (interval); changeTo (I); this. onmouseout = isAuto () ;}}) (I )}}Jquery is much simpler than js, so I won't go into details here. When I was in the design pattern class in my junior year, the teacher told us not to implement programming for interfaces, but to avoid constants in the Code as much as possible to improve code reusability. So when writing code, variable factors are mentioned in parameters. In the last sentence, for Javascript DOM operations, the native JavaScript code is king. It can be mastered only by using more practices.
The simple example of the above native JS Implementation of image carousel and fade-in effect is all the content shared by xiaobian. I hope to give you a reference, and I hope you can provide more support for the customer's house.
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
