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

This article introduces the relevant knowledge of "how to realize the rowing map of JS". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Implement the function:

1. Automatic rotation: do not switch pictures when the mouse stays on the rotation map, and automatically rotate when the mouse leaves.

2. Click the left and right button to switch pictures.

3. Click the button below to switch to the corresponding picture.

4. The size of the rotation image is self-adaptive:

Can be displayed in the parent container of the execution.

When no parent container is specified, the body tag is placed by default. Take up the full width of the screen, and when you change the size of the browser window, the size of the rotation picture changes proportionally.

You can specify the width and height of the rotation graph.

Implementation: it is realized in an object-oriented way, passing in the data corresponding to the picture and the picture, and then creating an instance.

Import Carousel from'. / js/Carousel.js' Var itemList1 = [{day: 26, date: "/ Oct.2020", title: "No Ali No Xizang self-driving Ali Little North Line", src: ". / carousel_img/a.jpg",}, {day: 25 Date: "/ Oct.2020", title: "what kind of country is this?" , src: ". / carousel_img/b.jpg",}, {day: 24, date: "/ Oct.2020", title: "in Huizhou Wrote eight letters to Autumn ", src:". / carousel_img/c.jpg ",}, {day: 23, date:" / Oct.2020 ", title:" through the Wild Wind "to Inner Mongolia's Sheep chasing Plan", src: ". / carousel_img/d.jpg" }, {day: 22, date: "/ Oct.2020", title: "Love makes us omnipotent | Antarctic Adventure", src: ". / carousel_img/e.jpg",},] Let carousel1 = new Carousel (itemList1); carousel1.appendTo (".div1"); animation (); function animation () {requestAnimationFrame (animation); carousel1.update (); / / carousel2.update ();}

Code:

Import Component from'. / Component.js'; export default class Carousel extends Component {imgList; bnList; imgCon; dot; dotList= []; data; direction; pos=0; xonomo; speedX=1; bool=false; time=200; autoBool=true; / / WIDTH=13.66; / / HEIGHT=4.55; WIDTH; HEIGHT; constructor (_ data,_width,_height) {super ("div") This.data=_data; this.width = _ width; this.height = _ height; this.elem.className = "carousel" / / Object.assign (this.elem.style, {/ / width:this.WIDTH+ "rem", / / height:this.HEIGHT+ "rem", / / position: "relative", / / overflow: "hidden", / /}); let arr = [". / carousel_img/left.png", ". / carousel_img/right.png"] Let _ imgList = this.data.reduce ((value,item) = > {if (item.src) value.push (item.src); return value}, arr); this.loadImg (_ imgList,this.createCarousel); / / window.addEventListener ("resize", e = > this.resizeHandler (e)) } createCarousel (imgList) {Object.assign (this.elem.style, {width:this.WIDTH+ "rem", height:this.HEIGHT+ "rem", position: "relative", overflow: "hidden",}); this.imgList = imgList; this.bnList = this.imgList.splice (0P2) ImgList.forEach (item= > {Object.assign (item.style, {width:this.WIDTH+ "rem", height:this.HEIGHT+ "rem",}) this.createimgCon (); this.createDotList (); this.createBn () / / Animation is usually done outside, and you only need to write status updates inside the class. / / this.animation (); / / automatic rotation is not performed when the mouse hovers over the rotation map. This.elem.addEventListener ("mouseenter", e = > this.mouseHandler (e)); this.elem.addEventListener ("mouseleave", e = > this.mouseHandler (e));} createimgCon () {this.imgCon = document.createElement ("div"); Object.assign (this.imgCon.style, {width:this.WIDTH*2+ "rem", height:this.HEIGHT+ "rem", position: "absolute",}) Let item = this.createItem (this.imgList [0], this.data [0]); this.imgCon.appendChild (item); this.elem.appendChild (this.imgCon);} createItem (img,obj) {let item = document.createElement ("div") Object.assign (item.style, {width:this.WIDTH+ "rem", height:this.HEIGHT+ "rem", position: "relative", float: "left",}); let title = document.createElement ("div") Object.assign (title.style, {position: "absolute", left: "15%", top: "0.3rem", fontSize: "0.3rem", color: "# ffffff", textShadow: "0.02rem 0.02rem 0.02rem # 000000", width: "8rem", lineHeight: "0.5rem" }) let head1=document.createElement ("div") Object.assign (head1.style, {height: "0.5rem",}) head1.textContent = obj.date; let span = document.createElement ("span"); Object.assign (span.style, {fontSize: "0.4rem",}); span.textContent = obj.day; let head2 = document.createElement ("div") Object.assign (head2.style, {height: "0.5rem",}) head2.textContent = obj.title; head1.insertBefore (span,head1.firstChild); title.appendChild (head1); title.appendChild (head2); item.appendChild (title); item.appendChild (img); return item } createDotList () {this.dot = document.createElement ("ul") Object.assign (this.dot.style, {listStyle: "none", margin:0, padding:0, position: "absolute", left: (this.WIDTH-1.8) / 2 + "rem", bottom: "0.3rem",}) for (let iThis.dotClickHandler (e)) This.elem.appendChild (this.dot);} createBn () {for (let iThis.bnClickHandler (e)); this.elem.appendChild (this.bnList [I]);}} bnClickHandler (e) {if (this.bool) return if (e.target===this.bnList [0]) {this.direction= "left"; this.pos++ If (this.pos > this.imgList.length-1) this.pos = 0;} else {this.direction= "right"; this.pos--; if (this.pos

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.