Home > Developer > JavaScript
Js imitation official website image carousel effects, js
The official website gives me the impression that it is atmospheric and clean. The addition of many special effects is refreshing and full of big. It was interesting to see the carousel chart on their homepage, so I wrote one by myself.
The general feeling is coming out. paste a picture first:
Observe the html code of official website through F12 of the front-end artifact chrom, and it is not hard to see that they useFive div wrap pictures and use the position to control the div hierarchy through z-index, and display and hide the elements by controlling the opacity attribute and display attribute of each div.
The opacity attribute in the red box is as follows ):
Okay. Now we know the implementation method, so we can figure out the page layout first.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">The structure already has the following: Add js to make it work.
Js in the page:
Window. onload = function () {var oLeft = document. getElementById ("left"); var oRight = document. getElementById ("right"); var oWarp = document. getElementById ("imgWarp"); var aImg = oWarp. getElementsByTagName ("img"); var aEm = document. getElementsByTagName ("em"); var I = 5; btn = true; oLeft. onclick = function () {clearInterval (autoTimer); if (btn) {btn = false; fnAutoLeft () ;}}; function fnAutoLeft () {var a = I % 5; i-= 1; var B = I % 5; startOpacMove (aImg [a], 0, aImg [B], 100); setStyle (B);} oRight. onclick = function () {if (btn) {// display hide clearInterval (autoTimer); btn = false; fnAutoRight () ;}} can only be triggered once per unit time ();}}; var count = 0; function fnAutoRight () {var a = I % 5; I + = 1; var B = I % 5; startOpacMove (aImg [a], 0, aImg [B], 100); setStyle (B); if (I = 10) {I = 5; for (var j = 0; j <aImg. length; j ++) {if (j = 0) {aimg1_02.16.style.css Text = "opacity: 1; z-index: 5; display: block ;";} else {aimg1_j2.16.style.css Text = "opacity: 0; z-index: 0; display: none;" ;}}}var autoTimer = setInterval (fnAutoRight, 5000 ); function setStyle (a) {for (var I = 0; I <aEm. length; I ++) {aEm [I]. className = "";} aEm [a]. className = "active ";}}Js of motion:
Function startOpacMove (obj1, tag1, obj2, tag2) {var iCur1 = 0; var iCur2 = 0; var iTimer = null; var iSpeed1 =-2; var iSpeed2 = 2; clearInterval (iTimer); iTimer = setInterval (function () {var iBtn = true; iCur1 = css (obj1, 'opacity ') * 100; iCur2 = css (obj2, 'opacity ') * 100; iCur1 = Math. floor (iCur1); iCur2 = Math. floor (iCur2); if (iCur1! = Tag1 & iCur2! = Tag2) {iBtn = false; obj1.style. opacity = (iCur1 + iSpeed1)/100; // console. log ("Transparency value when hiding elements:" + (iCur1 + iSpeed1)/100); obj1.style. filter = 'Alpha (opacity = '+ (iCur1 + iSpeed1) +') '; obj1.style. zIndex = 0; obj2.style. opacity = (iCur2 + iSpeed2)/100; obj2.style. filter = 'Alpha (opacity = '+ (iCur2 + iSpeed2) +') '; obj2.style. zIndex = 5; obj2.style. display = "block";} if (iBtn) {clearInterval (iTimer); obj1.style. display = "none"; obj1.style. opacity = 0; obj2.style. opacity = 1; btn = true ;}, 10) ;}function css (obj, attr) {if (obj. currentStyle) {// The current browser has the currentStyle attribute return obj. currentStyle [attr];} else {return getComputedStyle (obj, false) [attr];}Let's take a look at how JavaScript code makes pictures move.
Think about one question: how is the screen switched to the left and what are the necessary conditions for this step. Assume that the first image is currently displayed. When switching to the right, hide the first image to show the second image. What you need to do is to hide the image whose index is 0 and the image whose index is 1, click the right button again to hide the image whose index is 1 and whose index is 2. The following information is displayed in sequence. The indexes to be obtained are 0, 1, 2, 3, and 4. Finally, pay attention to the Boundary Problem on the right.
Okay, paste the Code:
var i = 5; function fnAutoRight(){ var a = i % 5; i+=1; var b = i % 5;}Use the variable I to get the remainder of 5. The obtained value is the number 0-4, which is exactly the result we want. The corresponding a and B are just indexes of the image to be hidden and displayed. Call the completed motion js and the function that shows the current image position at the bottom, then the right part is OK.
Moving the image to the left, we need to hide what the image index is. If the current image is the first image and you click to the left, the index of the hidden image is 0, the index of the displayed image is 4, and the hidden index is 4, which is 3. Obviously, the indexes we need are 0, 4, 3, 2, and 1.
The Code is as follows:
var i=5;function fnAutoLeft(){ var a = i % 5; i-=1; var b = i % 5; }Similarly, I = 5, and then get the remainder of 5. The obtained a is the image index to be hidden, after I subtract 1 and then perform the remainder operation on 5, the image index to be displayed is obtained. This solves the left-side problem.
In the last part, write a setInterval function for timed playback, and set a call interval to complete the automatic playback function.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
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
