A native HTML carousel component method and device

Abstract

The present invention relates to the field of component development, and specifically provides a native HTML carousel component method, which has the following steps: S1, first create a class and inherit the native HTML element class; S2, create necessary DOM elements and add styles to the elements; S3, after the DOM structure is created, the carousel function is implemented; S4, set the event of clicking the right arrow to trigger the display of the next section; S5, perform automatic carousel; S6, use the Web components API to create a custom tag; S7, use the itpd‑swiper component on the page. Compared with the prior art, the child DOM tree created by the shadow DOM in the present invention will not be affected by the CSS style and JS script on the page. When a third-party component is introduced, it will not affect the website, and the plug-in becomes simpler for developers.

Description

Technical Field

[0001] The present invention relates to the field of component development, and specifically provides a native HTML carousel component method and device. Background Art

[0002] With the application of browser web pages in various aspects, front-end applications are also increasing. With more and more front-end codes being generated, more and more identical code snippets are being reused. At this time, front-end UI components came into being. In the current market, most UI frameworks are based on JS files, which are not separated in front-end and back-end projects.

[0003] A small part is to introduce external CSS and JS files into the application, along with the necessary HTML code snippets to ensure that the style of the page is the same as the designed page. Such reuse will generate a lot of duplicate code, and the modification and maintenance costs are high. Summary of the invention

[0004] The present invention aims at the above-mentioned deficiencies of the prior art and provides a native HTML carousel component method with strong practicality.

[0005] A further technical task of the present invention is to provide a native HTML carousel component device that is reasonably designed, safe and applicable.

[0006] The technical solution adopted by the present invention to solve its technical problem is:

[0007] A native HTML carousel component method has the following steps:

[0008] S1. First, create a class and inherit the native HTML element class;

[0009] S2. Create necessary DOM elements and add styles to them;

[0010] After S3 and DOM structures are created, the carousel function is implemented;

[0011] S4. Set the event of clicking the right arrow to trigger the display of the next section;

[0012] S5, perform automatic rotation;

[0013] S6. Create custom tags using the Web components API.

[0014] S7. Use itpd-swiper component on the page.

[0015] Furthermore, in step S2, the initial width, initial height and initial gradient time are set, and the gradient process curve is a quadratic Bezier curve;

[0016] In the DOM element style, the gradient curve of each element is a quadratic Bezier curve. Set the class name and the style field contained in the current class name. Set the layout mode to relative position, center layout, hide external elements, set the height to full, the width and height pixels are the same, the background color is white, set the left arrow style, and set the transparency of the arrow mouse movement.

[0017] Further, create a style tag, fill the DOM element style into the tag, create a div element, set the style name of the div, and create a div element again, which is the container element of the carousel section;

[0018] Set the style name of the container element, create a container element for dots, set the style name of the dot container element, create the style name of the left arrow, the right arrow, the left arrow style name and the right arrow style name, create a shadow DOM, add the style element to the shadow DOM, add the carousel container to the shadow DOM, and add the carousel section list container to the carousel container.

[0019] Further, a dot container, a left arrow and a right arrow are added to the carousel container, the first section to be displayed is set, the default value of the number of carousel sections is set, whether the carousel section is moving is set, and the init method is called to perform initialization operations;

[0020] Call the container setting method, set the left arrow, right arrow and the number of carousel sections, add a click event to the right arrow, execute the method of scrolling to the next section, add a click event to the left arrow, determine whether it is scrolling, execute the logic when there is no scrolling, remove the dot style under the current sequence number, reduce the sequence number by one, set the sequence number to the last digit, and call the method of setting the dot style under the current sequence number;

[0021] Set the width of the section container according to the number of sections, assign the HTML string in the custom tag to the section container, copy the first section, add the copied section to the last position of the section container, call the method to create dots, create dots, clear the dot container, loop according to the number of sections, create dot elements, set the style name of the dot elements, determine whether the current dot is displayed by default, and if so, add a display style to the current dot.

[0022] Further, a click event is added to the dot, a method for removing the dot style heating is called, the currently displayed serial number is changed to the clicked serial number, a method for adding dot style is called, the dot element is added to the dot container, the previous content is cleared to reduce the burden on the browser, a custom tag is created for each section, and a style tag is created to store the style;

[0023] Add style to the tag, create a container, add a style name to the container, add a shadow element to the tag, add a style to the shadow element, create a template, add a slot tag to the template, implement the function of automatically adding DOM structure, add a width attribute listening event, obtain the parameters of the width modification event and execute the method of modifying the width.

[0024] Furthermore, in step S3, the dot style is removed, the dot style is added, and the plate position is changed. In the removal of the dot style, the selection state of the last displayed dot is removed when the plate is scrolled and switched;

[0025] When adding the dot style, after scrolling and switching the panels, add a selected state to the dot that needs to be displayed currently;

[0026] The changing of the panel position moves the panel to the panel corresponding to the click or the next panel position, sets the moving state, determines whether it is currently moving to the left or right, determines the relationship between the current sequence number and the number of panels, sets the event required for switching, and sets the position of the panel container so that the corresponding panel can be displayed;

[0027] Set the timer, set the switching effect to the default effect, the position of the block container can display the corresponding block, remove the timer, set the position of the block container to display the corresponding block; set the timer, set the switching time, set the position of the block container to display the corresponding block, remove the timer, reset the movement effect, set the position of the block container to display the corresponding block, reset the movement method, modify the movement method under critical conditions, and reset it back to the default movement method.

[0028] Furthermore, in step S4, when there is no plate movement, the dot style before the movement is removed, the critical condition is determined, the serial number corresponding to the next plate is obtained, and the style is added to the dot after the movement.

[0029] Furthermore, in step S5, the program automatically jumps, sets a timer, executes the jump within the set time, and calls again to implement an infinite loop.

[0030] A native HTML carousel component device includes: at least one memory and at least one processor;

[0031] The at least one memory is used to store a machine-readable program;

[0032] The at least one processor is used to call the machine-readable program to execute a native HTML carousel component method.

[0033] Compared with the prior art, the native HTML carousel component method and device of the present invention has the following outstanding beneficial effects:

[0034] (1) The sub-DOM tree created by the shadow DOM in the present invention will not be affected by the CSS style and JS script on the page. When a third-party component is introduced, it will not affect the website, and the plug-in becomes simpler for developers.

[0035] (2) Enhanced versatility: Web Components support the development of more general components without having to consider the technology used by the project or customize the development for native HTML or JS frameworks such as VUE.

[0036] (3) Better maintainability: the present invention can bring about faster and more reliable Web applications, and testing will become simpler.

[0037] (4) Developers need to write less code and do not need to worry about how components are implemented. They only need to adjust the style and functionality based on the exposed interfaces and properties of the components. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0039] Attached Figure 1 It is a flowchart of the native HTML carousel component method. DETAILED DESCRIPTION

[0040] In order to enable those skilled in the art to better understand the solution of the present invention, the present invention is further described in detail below in conjunction with specific implementation methods. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0041] A best embodiment is given below:

[0042] like Figure 1 As shown, a native HTML carousel component method in this embodiment has the following steps:

[0043] S1. First create a class and inherit the native HTML element class:

[0044] The code is: class ItpdSwiper extends HTMLElement{…}.

[0045] S2. Create the necessary DOM elements and add styles to them:

[0046] Set the initial width to 480 pixels, the initial height to 270 pixels, the initial gradient time to 300 milliseconds, and the gradient process curve to a quadratic Bezier curve;

[0047] In the DOM element style, it indicates that the gradient mode of each element is the preset gradient mode above, sets the class name and the style field contained in the current class name, sets the layout mode to relative position, centered layout, hides external elements, sets the height to full, sets the layout mode to absolute position, 0 distance from the left, 0 distance from the top, elastic layout, starts from the horizontal left, vertically centered, 10 pixels in width, 10 pixels in height, white background color, 10 pixels in rounded corners, sets the background color, sets the left and right arrow styles, and sets the transparency of the arrow mouse movement.

[0048] Create a style tag and fill the style code above into the tag. Create a div element, set the style name of the div, create another div element, which is the container element of the carousel section, set the style name of the container element, create a dot container element, set the style name of the dot container element, the left arrow, the right arrow, the style name of the left arrow, and the style name of the right arrow, create a shadow DOM, add the style element to the shadow DOM, add the carousel container to the shadow DOM, and add the carousel section list container to the carousel container.

[0049] Add a dot container to the carousel container, add a left arrow to the carousel container, add a right arrow to the carousel container, and add a right arrow to the carousel container. Set the initial display section, the default number of carousel sections, set whether the carousel section is moving, call the init method, and perform some initialization operations.

[0050] Call the container setting method, set the left arrow, set the right arrow, set the number of carousel sections, add a click event to the right arrow, execute the method to scroll to the next section, add a click event to the left arrow, determine whether it is scrolling, execute the logic when there is no scrolling, remove the dot style under the current sequence number, reduce the sequence number by one, set the sequence number to the last digit, and call the method to set the dot style under the current sequence number.

[0051] Set the width of the section container according to the number of sections, assign the HTML string in the custom tag to the section container, copy the first section, add the copied section to the last position of the section container, call the method to create dots, create dots, clear the dot container, loop according to the number of sections, create dot elements, set the style name of the dot elements, determine whether the current dot is displayed by default, and if so, add a display style to the current dot.

[0052] Add a click event to the dot, call the method to remove the dot style, change the currently displayed serial number to the clicked serial number, call the method to add the dot style, add the dot element to the dot container, clear the previous content to reduce the burden on the browser, create a custom tag for each section, create a style tag to store style codes, and add style codes to the tag.

[0053] Create a container, add a style name to the container, add a shadow element to the tag, add a style to the shadow element, create a template, add a slot tag to the template, implement the function of automatically adding DOM structure, add a width attribute listening event, obtain the parameters of the width modification event and execute the method of modifying the width.

[0054] The code is as follows:

[0055] constructor(){

[0056] this.defaultWidth = 480

[0057] this.defaultHeight=270

[0058] this.defaultTransition='.3s cubic-bezier(0,0.43,1,0.24)'

[0059] this.styleText=

[0060] transition:${this.defaultTransition};

[0061] itpd-swiper

[0062] position:relative

[0063] margin:0auto

[0064] overflow:hidden

[0065] itpd-items{

[0066] height:100%

[0067] overflow:hidden

[0068] position:absolute

[0069] left:0

[0070] top:0

[0071] display:flex

[0072] justify-content:flex-start

[0073] align-items:center

[0074] transition:${this.defaultTransition};

[0075] .itpd-items itpd-swiper-item{

[0076] height:100%;

[0077] .itpd-swiper-dots{

[0078] position:absolute;

[0079] left:50%;

[0080] bottom:10px;

[0081] transform:translateX(-50%);

[0082] display:flex;

[0083] justify-content:center;

[0084] align-items:center;

[0085] .itpd-each-dot

[0086] width:10px;

[0087] height:10px;

[0088] background-color:#ffffff;

[0089] border-radius:10px;

[0090] margin:0 3px;

[0091] cursor:pointer;

[0092] transition:.3s;

[0093] itpd-each-dot-active{

[0094] background-color:#606266;

[0095] .itpd-arrow{

[0096] width:20px;

[0097] height:20px;

[0098] border-radius:10px;

[0099] background-color:#ffffff;

[0100] position:absolute;

[0101] top:calc(50%-10px);

[0102] line-height:20px;

[0103] text-align:center;

[0104] cursor:pointer;

[0105] opacity:0.3;

[0106] itpd-arrow:hover

[0107] opacity:1;

[0108] itpd-left-arrow{

[0109] left:10px;

[0110] itpd-right-arrow{

[0111] right:10px;

[0112] this.styleElement=document.createElement('style')

[0113] this.styleElement.innerHTML=this.styleText

[0114] this.container=document.createElement('div')

[0115] this.container.className='itpd-swiper'

[0116] this.swiperItems=document.createElement('div');

[0117] this.swiperItems.className='itpd-items'

[0118] this.dots=document.createElement('div')

[0119] this.dots.className='itpd-swiper-dots'

[0120] this.leftArrow=document.createElement('div')

[0121] this.rightArrow=document.createElement('div')

[0122] this.leftArrow.className='itpd-arrow itpd-left-arrow'

[0123] this.rightArrow.className='itpd-arrowitpd-right-arrow'

[0124] this.root=this.attachShadow({mode:'open'});

[0125] this.root.appendChild(this.styleElement);

[0126] this.root.appendChild(this.container);

[0127] this.container.appendChild(this.swiperItems)

[0128] this.container.appendChild(this.dots)

[0129] this.container.appendChild(this.leftArrow)

[0130] this.container.appendChild(this.rightArrow);

[0131] this.current=0;

[0132] this.length=0;

[0133] this.isMoving=false;

[0134] this.init()

[0135] init()

[0136] this.setContainer()

[0137] this.leftArrow.innerHTML='<'

[0138] this.rightArrow.innerHTML='>'

[0139] this.length=this.children.length

[0140] this.rightArrow.onclick=()=>{

[0141] this.nextItem()

[0142] this.leftArrow.onclick=()=>{

[0143] if(!this.isMoving){

[0144] this.removeDotClassName()

[0145] if(this.current>0){

[0146] this.current-=1

[0147] }else{

[0148] this.current=this.length–1

[0149] this.addDotClassName('left')

[0150] this.swiperItems.style.width=(this.length+1)+'00%'

[0151] this.swiperItems.innerHTML=this.innerHTML

[0152] const end=this.children[0].cloneNode(true);

[0153] this.swiperItems.appendChild(end)

[0154] this.createDots()

[0155] createDots(){

[0156] this.dots.innerHTML=”

[0157] for(let i=0;i<this.length;i++)

[0158] const dot=document.createElement('div')

[0159] dot.className='itpd-each-dot'

[0160] if(i==this.current){

[0161] dot.classList.add('itpd-each-dot-active')

[0162] dot.onclick=()=>

[0163] this.removeDotClassName()

[0164] this.current=I

[0165] this.addDotClassName(”)

[0166] this.dots.appendChild(dot)

[0167] this.innerHTML=”

[0168] class TSwiperItem extends HTMLElement{

[0169] constructor(){

[0170] this.styleElement=document.createElement('style')

[0171] this.styleElement.innerHTML=

[0172] itpd-swiper-item

[0173] height:100%;

[0174] display:flex;

[0175] this.container=document.createElement('div');

[0176] this.container.className='itpd-swiper-item'

[0177] this.root=this.attachShadow({mode:'open'});

[0178] this.root.appendChild(this.styleElement);

[0179] let template=document.createElement('template')

[0180] let inner=

[0181] <slot>< / slot>

[0182] template.innerHTML=inner

[0183] let content=template.content

[0184] this.root.appendChild(content.cloneNode(true))

[0185] static get observedAttributes(){

[0186] return['width']

[0187] attributeChangedCallback(name,oldValue,newValue){

[0188] const fn=this['set'+name.replace(name[0],name[0].toUpperCase())].bind(this)

[0189] fn&&fn(newValue)

[0190] setWidth(width)

[0191] this.style.width=width+'px'

[0192] After S3 and DOM structures are created, the carousel function is implemented:

[0193] Remove the dot style, add the dot style, and change the plate position. When removing the dot style, remove the selected state of the last displayed dot when scrolling to switch plates;

[0194] When adding the dot style, after scrolling and switching the panels, add a selected state to the dot that needs to be displayed currently;

[0195] The changing of the panel position moves the panel to the panel corresponding to the click or the next panel position, sets the moving state, determines whether it is currently moving to the left or right, determines the relationship between the current sequence number and the number of panels, sets the event required for switching, and sets the position of the panel container so that the corresponding panel can be displayed;

[0196] Set the timer, set the switching effect to the default effect, the position of the section container can display the corresponding section, remove the timer, and set the position of the section container to display the corresponding section.

[0197] Set the timer, set the switching time, set the position of the plate container to display the corresponding plate, remove the timer, reset the movement effect, set the position of the plate container to display the corresponding plate, reset the movement method, modify the movement method under critical conditions, and reset it back to the default movement method. The function of this method is to set the movement state, restrict the plate from triggering the movement event again when it moves, perform attribute monitoring, monitor the following three attributes respectively, monitor the changes of the attributes and call the corresponding modification method, set the width, set the height, and set automatic scrolling.

[0198] The code is as follows:

[0199] removeDotClassName(){

[0200] this.dots.children[this.current].classList.remove('itpd-each-dot-active')

[0201] addDotClassName(type){

[0202] this.dots.children[this.current].classList.add('itpd-each-dot-active')

[0203] this.setItemPosition(type)

[0204] setItemPosition(type){

[0205] this.setMoving() / /

[0206] if(this.current===this.length-1&&type==='left'){ / /

[0207] this.swiperItems.style.transition='0s'

[0208] this.swiperItems.style.left='-'+this.defaultWidth*this.length+'px'

[0209] const st=setTimeout(()=>{

[0210] this.swiperItems.style.transition=this.defaultTransition

[0211] this.swiperItems.style.left='-'+this.defaultWidth*this.current+'px'

[0212] clearTimeout(st)

[0213] },0)

[0214] }else if(this.current===0&&type==='right'){

[0215] this.swiperItems.style.left='-'+this.defaultWidth*this.length+'px'

[0216] const st=setTimeout(()=>{

[0217] this.swiperItems.style.transition='0s'

[0218] this.swiperItems.style.left='0px'

[0219] clearTimeout(st)

[0220] this.resetTransition()

[0221] },300)

[0222] }else

[0223] this.swiperItems.style.left='-'+this.defaultWidth*this.current+'px'

[0224] resetTransition(){

[0225] const st=setTimeout(()=>{

[0226] this.swiperItems.style.transition=this.defaultTransition

[0227] clearTimeout(st)

[0228] },100)

[0229] setMoving(){

[0230] this.isMoving=true

[0231] const st=setTimeout(()=>{

[0232] this.isMoving=false

[0233] },400)

[0234] static get observedAttributes(){

[0235] return[

[0236] 'width','height','autoplay'

[0237] attributeChangedCallback(name,oldValue,newValue){

[0238] const fn=this['set'+name.replace(name[0],name[0].toUpperCase())].bind(this)

[0239] fn&&fn(newValue

[0240] setWidth(width){

[0241] this.defaultWidth = width

[0242] this.setContainer()

[0243] setHeight(height){

[0244] this.defaultHeight = height

[0245] this.setContainer()

[0246] setAutoplay(){

[0247] this.autoNext()

[0248] S4. Set the event of clicking the right arrow to trigger the display of the next section:

[0249] When there is no plate movement, remove the dot style before the movement, judge the critical condition, get the serial number corresponding to the next plate, and add the style to the dot after the movement.

[0250] The code is as follows:

[0251] nextItem(){

[0252] if(!this.isMoving){

[0253] this.removeDotClassName()

[0254] if(this.current+1 <this.length)

[0255] this.current+=1

[0256] }else{

[0257] this.current = 0

[0258] this.addDotClassName('right')

[0259] S5. Automatically play the video:

[0260] Automatically jump, set a timer, execute the jump within the set time, and call again to achieve an infinite loop.

[0261] The code is as follows:

[0262] autoNext(){

[0263] const st=setTimeout(()=>{

[0264] this.nextItem()

[0265] clearTimeout(st)

[0266] this.autoNext()

[0267] },3000)

[0268] S6. Create custom tags using the Web components API:

[0269] The following is the specific code for creating a custom label:

[0270] window.customElements.define('itpd-swiper',TSwiper); Create a custom label name for the carousel component

[0271] window.customElements.define('itpd-swiper-item',TSwiperItem)

[0272] Create a custom label name for a single section of the carousel component.

[0273] S7. Use itpd-swiper component on the page:

[0274] Take HTML as an example, you can set the width and autoplay attributes;

[0275] Use custom carousel component tags, set automatic carousel and width to 1280, use custom carousel component section tags, set the width to 1280, display a div with background color, use custom carousel component section tags, set the width to 1280, display a div with background color, use custom carousel component section tags, set the width to 1280, use custom carousel component section tags, set the width to 1280, display a div with background color, use custom carousel component section tags, set the width to 1280.

[0276] The code is as follows:

[0277] <t-swiper autoplay width="1280">

[0278] <t-swiper-item width="1280">

[0279] <div class＝"test"style＝"width:100％；height:100％；background-color:#009aff；">

[0280]

[0281] <t-swiper-item width="1280">

[0282] <div class＝"test"style＝"width:100％；height:100％；background-color:red；">

[0283]

[0284] <t-swiper-item width="1280">

[0285] <div class＝"test"style＝"width:100％；height:100％；background-color:green；">

[0286]

[0287] <t-swiper-item width="1280">

[0288] <div class＝"test"style＝"width:100％；height:100％；background-color:blue；">

[0289]

[0290]

[0291] Based on the above method, a native HTML carousel component device in this embodiment includes: at least one memory and at least one processor;

[0292] The at least one memory is used to store a machine-readable program;

[0293] The at least one processor is used to call the machine-readable program to execute a native HTML carousel component method.

[0294] The above-mentioned specific implementations are only specific cases of the present invention. The patent protection scope of the present invention includes but is not limited to the above-mentioned specific implementations. Any appropriate changes or substitutions made by a person of ordinary skill in the art in accordance with the claims of a native HTML carousel component method and device of the present invention shall fall within the patent protection scope of the present invention.

[0295] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A native HTML carousel component method, characterized in that: The steps are as follows: S1. First, create a class and inherit the native HTML element class; S2. Create necessary DOM elements and add styles to them; Set the initial width, initial height and initial gradient time. The gradient process curve is a quadratic Bezier curve. In the DOM element style, the gradient curve of each element is a quadratic Bezier curve, set the class name and the style field contained in the current class name, set the layout mode to relative position, center layout, hide external elements, set the height to full, the width and height pixels are the same, the background color is white, set the left arrow style, and set the transparency of the arrow mouse movement; Create a style tag, fill the DOM element style into the tag, create a div element, set the div style name, and create another div element, which is the container element of the carousel section; Set the style name of the container element, create a dot container element, set the style name of the dot container element, create a left arrow, a right arrow, a left arrow style name and a right arrow style name, create a shadow DOM, add the style element to the shadow DOM, add the carousel container to the shadow DOM, and add a carousel section list container to the carousel container; Add a dot container, a left arrow, and a right arrow to the carousel container, set the initial display section, set the default number of the carousel sections, set whether the carousel section is moving, and call the init method to perform initialization operations; Call the container setting method to set the left arrow, right arrow and number of carousel sections, add a click event to the right arrow, execute the method to scroll to the next section, add a click event to the left arrow, determine whether it is scrolling, and perform the following operations when it is not scrolling: call the method to set the dot style under the current sequence number, remove the dot style under the current sequence number, reduce the sequence number by one, and set the sequence number to the last digit; Set the width of the section container according to the number of sections, assign the HTML string in the custom tag to the section container, copy the first section, add the copied section to the last position of the section container, call the method to create dots, create dots, clear the dot container, loop according to the number of sections, create dot elements, set the style name of the dot elements, determine whether the current dot is displayed by default, and if so, add a display style to the current dot; After S3 and DOM structures are created, the carousel function is implemented; S4. Set the event of clicking the right arrow to trigger the display of the next section; S5, perform automatic rotation; S6. Create custom tags using the Web components API; S7. Use itpd-swiper component on the page.

2. A native HTML carousel component method according to claim 1, characterized in that: Add a click event to the dot, call the method to remove the dot style, change the currently displayed serial number to the clicked serial number, call the method to add the dot style, add the dot element to the dot container, clear the previous content to reduce the burden on the browser, create a custom tag for each section, and create a style tag for storing styles; Add style to the tag, create a container, add a style name to the container, add a shadow element to the tag, add a style to the shadow element, create a template, add a slot tag to the template, implement the function of automatically adding DOM structure, add a width attribute listening event, obtain the parameters of the width modification event and execute the method of modifying the width.

3. A native HTML carousel component method according to claim 2, characterized in that: In step S3, the dot style is removed, the dot style is added, and the plate position is changed. In the removal of the dot style, the selection state of the last displayed dot is removed when the plate is scrolled and switched; When adding the dot style, after scrolling and switching the panels, add a selected state to the dot that needs to be displayed currently; The changing of the panel position moves the panel to the panel corresponding to the click or the next panel position, sets the moving state, determines whether it is currently moving to the left or right, determines the relationship between the current sequence number and the number of panels, sets the event required for switching, and sets the position of the panel container so that the corresponding panel can be displayed; Set the timer and configure the switching effect. If no switching effect is set, the default effect is used and the running effect is displayed in real time in the section container. Configure the timer, including configuring the switching time, and the running effect is displayed in the section container. Remove the timer, reset the movement effect, and display the running effect in real time in the section container; reset the movement mode, and reset it back to the default movement mode after modifying the movement mode under critical conditions.

4. A native HTML carousel component method according to claim 3, characterized in that: In step S4, when there is no plate movement, the dot style before the movement is removed, the critical condition is determined, the serial number corresponding to the next plate is obtained, and the style is added to the dot after the movement.

5. A native HTML carousel component method according to claim 4, characterized in that: In step S5, the program automatically jumps, sets a timer, executes the jump within the set time, and calls again to implement an infinite loop.

6. A native HTML carousel component device, characterized in that: include: at least one memory and at least one processor; The at least one memory is used to store a machine-readable program; The at least one processor is configured to call the machine-readable program to execute the method according to any one of claims 1 to 5.

Images