I can't raise my interest in CSS recently because I have been resentful about picture carousels and have not learned well, so I took some time to get familiar with JS. Then I walked to the black road and wrote the effect of carousel and picture fading in using jquery and js. The road to learning in the future is very long, I hope I will go further and further on the front-end road `(∩_∩)′
In principle, there are many tutorials online, simply put.
Fade in, but in fact, only the fade effect is used here. For each faded picture, we set its display to block, and the others are none, so there is only one picture that actually exists and occupies a position in the document stream. Before setting the display method of the picture, gradually increasing the transparency of the picture will give people a feeling of fading.
In fact, there is another key point in js code. Closures are used in the code, so I have a little understanding of closures. Let me say a few more words here:
The official explanation of closures is that a closure is an expression (usually a function) that has many variables and an environment bound to these variables, so these variables are also part of the expression.
The simplest way is:
When the internal function b of function a is referenced by a variable outside function a, a closure is created.
Said it more thoroughly. The so-called "closure" is to define another function as the method function in the constructor body, and the method function of this object in turn refers to temporary variables in the outer function body. This allows the temporary variable value used by the original constructor body to be indirectly maintained as long as the target object can always maintain its method during its lifetime.
Although the initial constructor call has ended and the names of the temporary variables have disappeared, the value of the variable can always be referenced within the target object's method, and the value can only be accessed in this method. Even if the same constructor is called again, only new objects and methods will be generated. The new temporary variable only corresponds to the new value, and is independent of the last call.
The following function is a closure function. Why use closures? Is it not possible for ordinary functions? It's really not possible. The purpose of the closure here is to keep a reference to the flag. If there is no closure, for local variables, as long as the function is executed once, that is, the flag is executed once, the local variable will be collected and cleaned up by the garbage collection mechanism. We refer to the flag variable through the function in the intermittent call. When the second execution is executed, the flag will lose its value and the function body cannot execute the correct result. When I started to touch the front end, I felt that the closure was optional. The fact is, this thing 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 picture moves to the right, the left value decreases 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); } } };Here is the code:
html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>picsGlide</title><link href="css/index.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="js/jquery-1.3.2.js"></script><script src="js/index.js"></script></head><body onLoad="init()"><div id = "picBox"> <ul class = "show_pic" style = "left: 0"> <li class = "on"><a href="#"><img src="imgs/ccc.jpg" /></a></li> <li><img src="imgs/aaa.jpg" /></li> <li><img src="imgs/bbb.jpg" /></li> <li><img src="imgs/ccc.jpg" /></li> <li><img src="imgs/ccc.jpg" /></li> <li><img src="imgs/ccc.jpg" /></li> </ul> <div class = "bg"></div> <ul class = "show_des"> <li>puss in boots1</li> <li>puss in boots2</li> <li>puss in boots3</li> <li>puss in boots4</li> <li>puss in boots5</li> </ul> <ul class = "icon_num"> <li class = "on" >1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul></div></body></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 picture*/#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(oElement) { for(var i=0;i<oElement.childNodes.length;i++){ var node=oEelement.childNodes[i]; if(node.nodeType==3 && !//S/.test(node.nodeValue)) { node.parentNode.removeChild(node); } } } //carousing code this.layerGlide=function(auto,oBox,sSingleSize,second,fSpeed,point) { var interval,timeout; //Two timers var pos; //The absolute value of the current positioning coordinate shaping var time = second, now = 0; //time image moves once time interval, now the index value of the current image var speed = fSpeed //Movement speed var delay = second * 1000; //Time interval for each switching of the image var picBox = document.getElementById(oBox); cleanWhitespace(picBox); var pic = picBox.childNodes[0]; //Picture list var des = picBox.childNodes[2].getElementsByTagName("li"); //Picture 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 picture moves to the right, the left value decreases 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 = (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) } } //Fake in and out this.layerFader=function(auto, oBox, second, count, speed) { var interval,timeout; //Two timers var now = 0; //Time picture moves once time interval, now the index value of the current picture var delay = second * 1000; //The time interval of each image is switched 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.length; function fadeIn(elem){ setOpacity(elem,0); //Initially fully transparent for(var i = 0;i<=count;i++){ //Transparency change 20 * 5 = 100 (function(i){ var level = i * 5; //Transparency change value each time setTimeout(function(){ setOpacity(elem, level) },i*speed); })(i); } } function setOpacity(elem, level) { //Set transparency if (elem.filters) { elem.style.filter = "alpha(opacity=" + level + ")"; } else { elem.style.opacity = level / 100; } } var changeTo = function(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 = (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 my junior year, I took the design pattern class. The teacher told us to program for interfaces rather than implementations. Try not to appear constants in the code to improve the reusability of the code. Therefore, when writing the code, all variable factors are mentioned to the parameters. In the last sentence, for js DOM operation, js is the kingly way. Only by using and practicing more can you master it well. I hope you will go further and further in the future.
The above simple example of native JS implementing image carousel and fade-in effects is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.