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

This article mainly introduces "how to make js native carousel plug-ins". In daily operation, I believe many people have doubts about how to make js native carousel plug-ins. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the questions of "how to make native carousel plug-ins with js". Next, please follow the editor to study!

When calling, you only need to write a DIV.

The configuration content of the called js:

The location to be displayed in the incoming broadcast image (div)

Pass in the picture and click on the jump link

Don't say much, put on the code.

HTML

In the HTML document, here is the configuration content of the broadcast graph. There are two parameters, the first is the DIV to be passed (the area shown in the rotation map), the second parameter is an array, the elements in the array are objects, the first attribute imgUrl in the object represents the picture, and the second attribute link represents the jump link.

An array element is a picture, unlimited and adaptable.

BannerArea (document.getElementById ("banner"), [{imgUrl: "picture", link: "jump link"}, {imgUrl: "picture", link: "jump link"}, {imgUrl: "picture", link: "jump link"}])

JS plug-in content

/ / two parameters, the first rowing area, the second is to configure function bannerArea (areaDom, options) {var imgArea = document.createElement ("div"); var numberArea = document.createElement ("div"); var curIndex = 0var curIndex / var changeTimer = null; var changeDuration / interval var timer = null; initImg (); / / create an area to display the picture initNumber () / / create area display corner label setStatus (); / / set status autoChange (); / / automatically switch / / the following is a local function / / create a picture, and set the style function initImg () {imgArea.style.width = "100%"; imgArea.style.height = "100%"; imgArea.style.display = "flex"; imgArea.style.overflow = "hidden" For (let I = 0; I < options.length; iTunes +) {var obj = options [I]; var img = document.createElement ("img"); img.src = obj.imgUrl; img.style.width = "100%"; img.style.height = "100%"; img.style.margin = "0" Img.addEventListener ("click", function () {location.href = options.link;}) imgArea.appendChild (img);} imgArea.addEventListener ("mouseenter", function () {clearInterval (changeTimer); changeTimer = null }) imgArea.addEventListener ("mouseleave", function () {autoChange ();}) areaDom.appendChild (imgArea);} / / create corner element and set style function initNumber () {numberArea.style.textAlign = "center"; numberArea.style.marginTop = "- 25px"; for (let I = 0; I < options.length) ) {var sp = document.createElement ("span"); sp.style.width = "12px"; sp.style.height = "12px"; sp.style.background = "lightgray"; sp.style.display = "inline-block"; sp.style.margin = "0 7px"; sp.style.borderRadius = "50%" Sp.style.cursor = "pointer"; sp.addEventListener ("click", function () {curIndex = I; setStatus ();}) numberArea.appendChild (sp);} areaDom.appendChild (numberArea) } / / set the corner area state function setStatus () {/ / set the background color of the circle for (var I = 0; I < options.length; iTunes +) {if (I = curIndex) {/ / set the background color to select numberArea.children.style.background = "rgb (222757)" } else {/ / unselected numberArea.children.style.background = "lightgray";;}} / / display picture var start = parseInt (imgArea.children [0] .style.marginal left); var end = curIndex *-100; var dis = end-start; var duration = 500 Var speed = dis / duration; if (timer) {clearInterval (timer);} timer = setInterval (function () {start + = speed * 20; imgArea.children [0] .style.marginal Left = start + "%"; if (Math.abs (end-start) < 1) {imgArea.children [0] .style.marginal Left = end + "%" ClearInterval (timer);}}, 20)} / / automatically switch function autoChange () {if (changeTimer) {return;} changeTimer = setInterval (function () {if (curIndex = options.length-1) {curIndex = 0;} else {curIndex++) } setStatus ();}, changeDuration)}}

The speed (switching time) of the broadcast map can be adjusted in the plug-in code var changeDuration = 1000 / interval.

At this point, the study on "how to implement the production of js native carousel plug-ins" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.