Examples of js native code implementation carousel images and js examples

Examples of js native code implementation carousel images and js examples

Carousel images are one of the most common effects on website pages. Different requirements and different effects apply to carousel images. We have seen a lot of different ways to achieve this effect, but there are a lot of troubles, and it is not easy to understand, and the compatibility is not good. Here we will share with you the common effects of carousel images using the js native code! The idea is clear and reproducible. It also covers almost all the effects of carousel on the current webpage!

1. Now let's take a look at what it looks like and take a picture to show you:

2. No matter what special effects we make, we must remember a principle: first write static code and then perform dynamic processing!

Our carousel static effects are implemented using html and css:

1. In order to standardize the code, we use css and js outreach methods as follows:

2. The body must also be named as follows:

Now, the html section is over! Now that the framework has been set up, the next step is css style settings:

3. css style settings are more flexible, because we need to make specific settings and regulations based on our page. The following results are for your reference only! We directly go to the Code:

/* Padding settings */* {margin: 0; padding: 0;}/* position of the image in the box */img {vertical-align: top ;} /* overall box style */. css_box {width: 500px; height: 265px; margin: 100px auto; position: relative; overflow: hidden; border: 1px solid green;}/* scroll box style */. slider {width: 500px; height: 200px; border: 1px solid red;}/* style of the main part of the scroll box */. slider-main {border: 1px solid yellow; width: 500px; height: 200px;}/* image style of the main part of the scroll box */. slider-main-img {position: Absolute; top: 0; left: 0; width: 500px; height: 200px ;}. slider-main-img {width: 100%;}/* style of scroll control on both sides */. slider_ctrl {text-align: center; padding-top: 25px;}/* class name, which cannot be found in html, but plays another role, therefore, this class name may only be created in js! * // * Control the pattern of the slideshow */. slider-ctrl-con {width: 24px; height: 20px; display: inline-block; background: url (.. /images/icon.jpg) no-repeat-24px-782px; margin: 0 5px; cursor: pointer; text-indent:-20em; overflow: hidden ;}. current {background-position:-24px-762px;}/* two span styles controlled by sliding */. slider-ctrl-prev ,. slider-ctrl-next {position: absolute; top: 50%; margin-top:-35px; background: url (.. /images/icon.jpg) no-repeat 6px top; width: 30px; height: 35px; opacity: 0.8; cursor: pointer ;}. slider-ctrl-prev {left: 0 ;}. slider-ctrl-next {right: 0; background-position:-6px-44px;}/* css style ends now */

Now, our static effect has been set up. To implement the function js we need is our core. Next we will use the native code to implement it:

Key Technology 1:Our carousel images need to be moved. With the timer's current auto-rolling effect, the conversion of images involves cascade. Finally, we will consider the compatibility of browsers!

Doing this is the first step of js. And so on, because almost all carousel broadcasts need to achieve these effects. If we can make another encapsulation and call it at any time, isn't it perfect,

That's right. We are doing this!

I encapsulated a function named animate here. After the function is encapsulated, we only need to call it to implement it:

// This is a motion frame with multiple attributes! // Create a function named animate! Obj is the object, json is the json value, and fn is the callback function! Function animate (obj, json, fn) {clearInterval (obj. timer); // clear the timer. This step has an impact! // Set a timer for the object! Obj. timer = setInterval (function () {var flag = true; // used to determine when the timer will be stopped! // For in loop, traversing the json object! For (var attr in json) {var current = 0; // The current status. This step is very important! If (attr = "opacity") {current = parseInt (getStyle (obj, attr) * 100);} else {current = parseInt (getStyle (obj, attr ));} // step size! Var step = (json [attr]-current)/10; step = step> 0? Math. ceil (step): Math. floor (step); // determine the transparency! If (attr = "opacity") {// in is a binary operator, meaning that the value of the first operand is the attribute name of the second operand. true is returned! // You can determine whether the style of this object has the opacity attribute! If ("opacity" in obj. style) {// if the condition is true, set the transparency value obj. style. opacity = (current + step)/100;} else {// if not, use the filter function! Obj. style. filter = "alpha (opacity =" + (current + step) + ")" ;}// stacked! Else if (attr = "zIndex") {obj. style. zIndex = json [attr];} else {obj. style [attr] = current + step + "px";} // deadline! If (current! = Json [attr]) {flag = false ;}} if (flag) {clearInterval (obj. timer); // Use callback if callback exists! If (fn) {fn () ;}}, 5)} // check compatibility! Function getStyle (obj, attr) {if (obj. currentStyle) {return obj. currentStyle [attr];} else {return window. getComputedStyle (obj, null) [attr] ;}// the multi-attribute motion frame ends!

Key Technology 2:With the animate encapsulation function, we have saved a lot of effort, but we need to meet the unnecessary requirements.

There are different effects. Let's achieve the specific effect below!

1. The first step we have not changed from ancient times to the present in using JavaScript: getting all the required elements, that is, DOM operations:

2. Perform a for loop to traverse all the image content:

3. Traverse button:

4. Set the setSquare function:

5. Set the timer:

6. Effects of mouse movement:

The example of the above js native code for implementing carousel images is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the customer's house.