Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to achieve NetEase cloud rotation effect with JavaScript". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve NetEase cloud rotation effect with JavaScript" can help you solve the problem.

1. The width of div is directly consistent with the width of the browser interface: width:100%

2. How to center the picture vertically in an absolutely positioned box?

Continue to add absolute positioning. Then change the values of top and left

3. To use an external js file, you need to wait until the page is loaded: window.uplonlupload = function () {}

4. Add and remove the class name of the element: get the DOM object first, and then add the type and delete the class name through classList.add ('current') (no need to add.) and classList.remove ().

5, event delegation: for example, there are 100 li, each li has the same click click event, maybe we will use the for loop method to traverse all the li, and then add events to them. This increases the number of interactions in dom the event delegate is implemented using the bubbling principle of the event, which starts at the deepest node and then gradually propagates the event upward. There is a node tree on the page, div > ul > li > a; for example, add a click click event to the innermost a, and the event will be executed layer by layer, in the order a > li > ul > div. When you add a click event to the outermost div, then when the inner ul,li,a does the click event, it will bubble to the outermost div, so it will be triggered. This is the event delegate, entrusting their parents to execute the event on their behalf.

6. Js changes the element background image url:document.getElementById ("element id") .style.backgroundImage = "url (picture path)"

7. Js implements the pause and start of timer:

Var dsq = setInterval (gd,40) ODiv. "nm" use "ver= function () / / stop timer to achieve pause effect {clearInterval (dsq);} oDiv." nm "use" timer () / / start timer to achieve restart effect {/ / setInterval (gd,40); wrong demonstration\ when multiple clicks are made, the effect is to keep beating because many timers are opened, which looks like no throttle effect. Dsq=setInterval (gd,40) / / if you need to start this timer again, be sure to add the variable name of the timer you defined. If you don't add it, you will start a new timer. Then the function above you that stops the dsq timer cannot stop the new timer. When you move the mouse in and out, you will start a new timer, and multiple timers will perform the same action at the same time. This is equivalent to a double reduction in the time in your timer, and the effect is that your timer is executed faster and faster.}

Document

* {margin: 0px; padding: 0px;} .box {position: relative; width: 1200px; height: 500px; margin: auto;} .img {width: 1200px; height: 500px; margin: auto; overflow: hidden;} img {width: 100%; height: 100%} .nav {width: 100%; height: 500px; margin-top: 20px / * the url address needs to be changed according to the display of the img image * / background-image: url (https://p1.music.126.net/j-TpUI1sHtMz0SRzu6L_Ig==/109951167232808852.jpg?imageView&blur=40x20); background-repeat: no-repeat; background-size: 100%;} .right, .left {width: 80px; height: 120px; position: absolute; top: 210px; right:-80px } .left {left:-80px;} .right img,.left img {position: absolute; top: 25px; left: 15px; width: 50px; height: 70px;} .left: hover,.right:hover {background-color: rgba (0,0,0,0.5); cursor: pointer;} ul {width: 600px; height: 100px; position: absolute; bottom:-20px; left: 340px } ul li {float: left; margin-left: 100px; list-style: disc; color: rgb (239,232,232); font-size: 50px;} ul .there {z-index: 2; color: rgb (237,8,8);} ul li:hover {color: red} a {width: 1200px; height: 500px; display: none;} .current {display: block } _ window.onload = function () {/ / timer, automatically change picture and background image and small circle var timer = window.setInterval (fun, [3000]) function fun () {for (I = 0; I)

< as.length; i++) { if (as[i].getAttribute('class') == 'current') { flag = i } } //如果flag=as.length-1；那么就让flag=0的a的类变为current，如果flag0,那么就让flag-1的a的class变为current if (flag == 0) { //排他思想 for (i = 0; i < as.length; i++) { as[i].classList.remove('current') lis[i].classList.remove('there') } as[as.length - 1].classList.add('current') lis[as.length - 1].classList.add('there') e = as.length - 1 } if (flag >

0) {for (I = 0; I < as.length) ClassList.remove ('current') lis.classList.remove (' there')} as [flag-1] .classList.add ('current') lis [flag-1] .classList.add (' there') e = flag-1 } fn (e) timer = setInterval (fun [3000])}) / / similar click event right.addEventListener to add the right button ('click', function () {window.clearInterval (timer) / / press the left button once Change a picture to the right, which is equivalent to getting the number of the currently displayed a / / traversing all the as to see which a's class is current, and then get the number / / I can't be used to index / / and let the corresponding li add the class name there (I = 0). I < as.length; iTunes +) {if (as [I] .getAttribute ('class') = =' current') {flag= I}} / / if flag=as.length-1 Then let the a class of flag=0 become current, if flag

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.