Shulou(Shulou.com)05/31 Report--

This article will explain in detail the example analysis of the native js carousel graph. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

The carousel graph is the most basic and common function of the front end. No matter the web end or the mobile end, the large platform or the small website, most of them will put a rowing picture effect on the home page. The following explains how to achieve a simple broadcast picture effect. Before taking this tutorial, readers need to have html and css skills, as well as a simple javascript foundation.

The effect of this example is shown in the following figure:

According to the effect of the example, the required elements are pictures, middle dot buttons, left and right arrow buttons, and so on. The actual html code is as follows:

1 2 3 4 5

Readers can write their own styles according to the actual effect.

Next, complete the code in the javascript section and first analyze the steps required for the effect of the broadcast graph.

1. Get the html elements and declare the related variables in the carousel diagram. As follows:

/ / get outsourced container var eContainer = document.getElementById ('bannerContainer'); / / get picture master container var eImgBox = eContainer.getElementsByClassName (' img_box') [0]; / / get picture container list var aImgList = eImgBox.getElementsByTagName ('div'); / / get selection button container var eSelBox = eContainer.getElementsByClassName (' sel_box') [0]; / / get selection button var aSelList = eSelBox.getElementsByTagName ('li') / / get the left button var eLeftBtn = eContainer.getElementsByClassName ('left_btn') [0]; / / get the right button var eRightBtn = eContainer.getElementsByClassName (' right_btn') [0]; / / current picture index var nIndex = 0; / / automatically switch timer var timer = null

two。 Set the size and location of the picture container

Generally speaking, the number of rotation images is not fixed, it may be 3 or 5, so "width of image container = width of outsourced container * number of rotation images", the code is as follows:

/ / get the outsourced container width var nContainerW = eContainer.offsetWidth; / / set the total container width of the image eImgBox.style.width = nContainerW * aImgList.length + 'px'

3. Set the default display image and select button. The first picture in this example is the default image. The code is as follows:

/ / the first picture eImgBox.style.left = '0pxpicture is displayed by default; / / by default, the first selection button is set to the current selection button aSelList [0] .className =' cur'

4. Bind the switch event to the select button, where the click event is delegated to the select button

This is the end of the example analysis of the native js carousel graph. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

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.