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

This article mainly explains "how to achieve the effect of javascript". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve the effect of rowing pictures with javascript".

In this paper, an example is given to share two ways to realize the effect of pattern rotation in javascript for your reference. The details are as follows.

The first one: simple rotation with buttons.

Introduction: the left and right buttons control the rotation, click the left button to switch to a picture, and click the right button to switch to the next one.

Html is as follows:

Css is as follows:

.box {width: 1000pxpolitics height: 300pxbox margin: 20px auto;position: relative;overflow: hidden;} .box {} .imgbox a {width: 1000pxpolitical height: 300pxpolitical position: absolute;left:1000px;top:0;} .imgbox a:nth-child (1) {left:0;} .imgbox img {width: 1000pxscape height: 300px;} .btns input {width: 40pxscape height: 40pxscape position: absolute;top:130px;border: Background: rgba; # left {left:0;} # right {right: 0;}}

Js is as follows:

Class Banner {constructor () {this.left = document.getElementById ("left"); this.right = document.getElementById ("right"); this.child = document.querySelectorAll (".imgbox a"); / / this.iNow = 0 to come in; / / this.iPrev = this.child.length-1 to go } init () {var that = this; this.left.addEventListener ("click", function () {that.changeIndex (1);}) this.right.addEventListener ("click", function () {that.changeIndex (2) })} changeIndex (direct) {if (direct = = 1) {if (this.iNow = = 0) {this.iNow = this.child.length-1; this.iPrev = 0;} else {this.iNow-- This.iPrev = this.iNow+ 1;}} else {if (this.iNow = = this.child.length-1) {this.iNow = 0; this.iPrev = this.child.length-1;} else {this.iNow++ / / the index to go is always the incoming index-1 this.iPrev = this.iNow-1;}} / / start this.move (direct) according to the index } move (direct) {if (direct = = 1) {/ / iPrev go / / from 0 to 1000 this.childthis.iPrev] .style.left = 0; move (this.child [this.iPrev], {left:1000}) / / iNow in / / from-1000 to 0 this.childhood [this.iNow] .style.left =-1000 + "px"; move (this.child [this.iNow], {left:0});} else {this.child[ this.iPrev] .style.left = 0 Move (this.child [this.iPrev], {left:-1000}); this.children.style.left = 1000 + "px"; move (this.child [this.iNow], {left:0});}} var b = new Banner (); b.init ()

The second kind: automatic rotation

Introduction: two or so buttons can control the picture left and right switch, the following with a number of buttons, click on the number, you can switch to several, automatic rotation process, the mouse enters to stop the rotation, the mouse leaves to continue the rotation

The htm code is as follows:

The css code is as follows:

.box {width: 1000pxpolitical height: 300pxposition margin: 20px auto;position: relative;overflow: hidden;}. Box .imgbox {} .imgbox a {width: 1000pxpolitical height: 300pxpolitical position: absolute;left:1000px;top:0;}. Imgbox a:nth-child (1) {left:0;}. Imgbox img {width: 1000pxpolitical height: 300px;} .btns input {width: 40pxposition: absolute;top:130px;border: none;background: rgba;} # left {left:0 } # right {right: 0;} .list {width: 1000pxpositional position: absolute;left: 0PX bottom: 0solid 1px black; display: flex;background: rgba. List span {flex: 1Accord height: 30pxShitextAfter align: center;border-left:solid 1px black;border-right: solid 1px black;}. List span.active {background: red;color: # fff;}

The js code is as follows:

Class Banner {constructor () {this.left = document.getElementById ("left"); this.right = document.getElementById ("right"); this.child = document.querySelectorAll (".imgbox a"); this.list = document.querySelector (".list"); this.box = document.querySelector (".box"); this.iNow = 0 This.iPrev = this.child.length-1;} init () {var that = this; this.left.addEventListener ("click", function () {that.changeIndex (1);}) this.right.addEventListener ("click", function () {that.changeIndex (- 1) }) / / L3. Event delegate binding event this.list.onclick = function (eve) {var e = eve | | window.event; var tar = e.target | | e.srcElement; if (tar.tagName = = "SPAN") {/ / L4. When the event is triggered, the index is changed and the span clicked before the point is passed into that.listChangeIndex (tar);} changeIndex (direct) {if (direct = = 1) {if (this.iNow = = 0) {this.iNow = this.child.length-1 This.iPrev = 0;} else {this.iNow--; this.iPrev = this.iNow + 1;}} else {if (this.iNow = = this.child.length-1) {this.iNow = 0 This.iPrev = this.child.length-1;} else {this.iNow++; this.iPrev = this.iNow-1;}} this.move (direct) } move (direct) {/ / according to the state passed in by the left and right buttons: left 1, right-1 / / use multiplication / / to change the direction of different buttons this.child[ this.iPrev] .style.left = 0; move (this.child [this.iPrev], {left:this.child [0] .offsetWidth * direct}) This.childthis.iNow] .style.left =-this.child [0] .offsetWidth * direct + "px"; move (this.child [this.iNow], {left:0}); this.setActive ();} createList () {/ / L1. Create a span corresponding to the number of pictures, with the number var str = ``; for (var iTuno: I {this.changeIndex (- 1);}, 2000) this.box.onmouseover = function () {clearInterval (t);} var that = this This.box.onmouseout = function () {t = setInterval (() = > {that.changeIndex (- 1);}, 2000)} / / console.log (that);}} var b = new Banner (); b.init (); b.createList (); b.autoPlay ()

In the two cases, the move in js is a buffer motion encapsulation, and the code is as follows:

Function move (ele,obj,cb) {clearInterval (ele.t); ele.t = setInterval (()) = > {/ / assuming the state is: the timer var I = true can be cleared / / because the information in the object is only used in the timer, the attribute and target variable for (var attr in obj) {if (attr = = "opacity") {var iNow = getStyle (ele,attr) * 100 are traversed / / and exchanged in advance in the timer. } else {var iNow = parseInt (getStyle (ele,attr));} let speed = (obj [attr]-iNow) / 10; speed = speed < 0? Math.floor (speed): Math.ceil (speed) / / as long as there is an attribute to the target, it stops. It is not correct / / all the attributes must be to the target before it can be stopped / / as long as one attribute does not reach the target. Never stop / / use the status to mark whether or not to stop the timer / / as long as there is an attribute that does not reach the target: never clear the timer if (iNow! = = obj [attr]) {I = false } if (attr = = "opacity") {ele.style.opacity = (iNow + speed) / 100;} else {ele.style [attr] = iNow + speed + "px" }} / / if the state is still true after all the attributes have been executed after each timer execution ends, it means that it has not been changed to false. If it is not changed to false, it means that no attribute has not reached the end point, then the state or false does not clear if (I) {clearInterval (ele.t). / / the user decides the function to be performed at the end of the animation. In case the user does not pass parameters, make a default judgment of if (cb) {cb ();} / cb & cb ();}}, 30);} function getStyle (ele,attr) {if (ele.currentStyle) {return ele.currentStyle [attr] } else {return getComputedStyle (ele,false) [attr];}} at this point, I believe you have a deeper understanding of "how to achieve the effect of javascript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.