How to realize the merry-go-round with javascript

This article mainly explains "how to use javascript to achieve merry-go-round", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to use javascript to realize the merry-go-round".

Javascript to achieve the merry-go-round method: 1, create a good HTML basic code file; 2, initialize reset;3, through the js code "function animate (obj, json, fn) {.}" method to achieve the merry-go-round effect.

This article operating environment: windows7 system, javascript1.8.5 version, DELL G3 computer.

How does javascript realize the merry-go-round?

JavaScript implementation of carousel carousel map specific code for your reference, the specific content is as follows:

Html code snippet

Add the picture yourself, or use your own uploaded photo and pull it to the bottom to see it.

Css code snippet:

Initialize reset

Blockquote, body, button, dd, dl, dt, fieldset, form, H2, H2, h4, h5, H6, H7, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {margin: 0; padding: 0} body, button, input, select, textarea {font: 12px/1.5 "Microsoft YaHei", "Microsoft Yahi", SimSun, "Arial", sans-serif; color: # 666;} ol, ul {list-style: none;} a {text-decoration: none } fieldset, img {border: 0; vertical-align: top;} a, input, button, select, textarea {outline: none;} a, button {cursor: pointer;} .wrap {width: 1200px; margin: 100px auto;} .examples {height: 500px; position: relative;} .roomli {position: absolute; left: 200px; top: 0;} .roomli img {width: 100%;} .arrow: 0; position: absolute; top: 50%; z-index: 1000; width: 100% } .prev, .next {width: 76px; height: 112px; position: absolute; z-index: 99;} .prev {left: 0; background: url (.. / images/prev.png) no-repeat;} .next {right: 0; background-image: url (.. / images/next.png);}

Js code snippet:

This is the encapsulated js code, which can be referenced directly.

Function animate (obj, json, fn) {clearInterval (obj.timer); obj.timer = setInterval (function () {var flag = true; for (var k in json) {if (k = "opacity") {var leader = getStyle (obj, k) * 100; var target = json [k] * 100; var step = (target-leader) / 10; step = step > 0? Math.ceil (step): Math.floor (step); leader = leader + step; obj.style [k] = leader / 100;} else if (k = = "zIndex") {obj.style.zIndex = json [k];} else {var leader = parseInt (getStyle (obj, k)) | | 0; var target = json [k]; var step = (target-leader) / 10; step = step > 0? Math.ceil (step): Math.floor (step); leader = leader + step; obj.style [k] = leader + "px";} if (leader! = target) {flag = false;}} if (flag) {clearInterval (obj.timer); if (fn) {fn ();}, 15);} function getStyle (obj, attr) {if (window.getComputedStyle) {return window.getComputedStyle (obj, null) [attr] } else {return obj.currentStyle [attr];}}

Define the onload function, get each object, set the mouse over event, let the arrow show the mouse away gradually, and then. Set the picture position (assign a value to the object)

_ window.onload = function () {/ / alert ("external JS"); / / find someone var wrap = document.getElementById ("wrap"); var arrow = document.getElementById ("arrow"); var arrLeft = document.getElementById ("arrLeft"); var arrRight = document.getElementById ("arrRight"); var slide = document.getElementById ("slide"); var ul = slide.children [0]; var lis = ul.children;// all pictures / / 1. The arrow gradually disappears wrap.onmouseover = function () {animate () {"opacity": 1});}; wrap.onmouseout = function () {animate (arrow, {"opacity": 0});}; / / 2. Set image location var config = [{"width": 400, "top": 20, "left": 50, "opacity": 0.2, "zIndex": 2}, / / 0 {"width": 600,70 "top": 0, "opacity": 0.8," zIndex ": 3}, / / 1 {" width ": 800,100,100,200" left "," opacity ": 1 "zIndex": 4}, / / 2 {width: 600, top: 70, left: 600, opacity: 0.8, zIndex: 3}, / / 3 {"width": 400, "top": 20, "left": 750, "opacity": 0.2, "zIndex": 2} / / 4] / / in fact, a configuration order specifies the size and location level transparency of each picture / / get all the li on the page to animate them from the current position to the specified position function assign () {for (var I = 0; I < lis.length; iTunes +) {animate (lis [I], config [I], function () {flag = reopen the valve after the completion of the animation}) }} assign (); / / 3. Click the arrow to rotate / / Click the right arrow arrRight.onclick = function () {if (flag) {flag = false;// to close the valve / / put the starting element to the last config.push (config.shift (); assign ();}}; / / Click the left arrow arrLeft.onclick = function () {if (flag) {flag = false;// to put the last element in the starting config.unshift (config.pop ()) Assign ();}} / / 4. Add throttle valve var flag = true;// to indicate that the valve is open}; at this point, I believe you have a deeper understanding of "how to use javascript to achieve merry-go-round", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!