Native js and jquery achieve image rotation fade-in and fade-out, while jquery fades in and out

Native js and jquery achieve image rotation fade-in and fade-out, while jquery fades in and out

There are many methods for image carousel. Here we use the fade-in and fade-out form.

Both js native and jQuery can be implemented. Because jquery encapsulates a lot of usage, it is much simpler to use and convert to js for use. In fact, js native is used to simulate these usage.

However, it is necessary to construct a basic presentation layer.

A simple image carousel generally consists of several parts.

For fade-in and fade-out

1. First, it is a peripheral part (in fact, it is the overall wrapper of the outermost side)

2. The next step is where you set the image carousel (that is, a banner)

3. Then there is an image group (you can use the new div or the ul --> li form)

4. A transparent background layer is placed at the bottom of the image.

5. Then there is an image description info layer, which is placed in the lower left corner of the transparent background layer (div or ul --> li)

6. Then there is a button layer to locate the index of the image group and place it in the lower right corner of the transparent background layer (div or ul --> li)

7. Of course, sometimes there are still two arrows at both ends of the image <and> to indicate the direction of the image carousel (this is not required first, if you want to use it as well)

As a result, the html structure can be constructed first.

<Div class = "wrapper"> <! -- Outermost layer --> <div class = "banner"> <! -- Carousel part --> <ul class = "imgList"> <! -- Image part --> <li class = "imgOn"> <a href = "#">  </a> </li> <a href = "# ">  </a> </li> <a href = "# ">  </a> </li> <a href = "# ">  </a> </li> <a href =" # ">  </a> </li> </ul> <div class =" bg "> </div> <! -- Background layer at the bottom of the image --> <ul class = "infoList"> <! -- Text Information Section in the lower left corner of the image --> <li class = "infoOn"> puss in boots1 </li> <li> puss in boots2 </li> <li> puss in boots3 </li> <li> puss in boots4 </li> <li> puss in boots5 </li> </ul> <ul class = "indexList"> <! -- Part number in the bottom right corner of the image --> <li class = "indexOn"> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> </div>

The alt description of the image part is the information content of the infoList part. In some cases, you can bind it to the hidden directory. It should be noted that the width and height of the image in imgList are set immediately. If they are set in css, they will be slower.

I add the corresponding on class to the three active parts. In actual use, there may be no need for so many active

Next, set the css style for it.

<style type="text/css">  body,div,ul,li,a,img{margin: 0;padding: 0;}  ul,li{list-style: none;}  a{text-decoration: none;}  .wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}  .banner{width: 400px;height: 200px;overflow: hidden;}  .imgList{width:400px;height:200px;z-index: 10;}  .imgList li{display: none;}  .imgList .imgOn{display: inline;}  .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}  .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}  .infoList li{display: none;}  .infoList .infoOn{display: inline;color: white;}  .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}  .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}  .indexList .indexOn{background: red;font-weight: bold;color: white;}</style>

Note:

1. banner is the image carousel range, which is set to 400 in width and 200 in height. This is also true for the ul peripheral of the image.

2. To display active items, set display: none for all li settings, and then add the on class settings display: inline.

3. When using the fadeIn () of jquery, it is changed to display: list-item. Therefore, overflow: hidden must be added to the banner. Otherwise, if the image is quickly switched, the overall image height exceeds the given height.

4. Add the z-index value to each part to prevent overwrite failures.

Here, check whether the first item is correctly displayed on the page. If it is displayed, add the js processing part.

I. jQuery Method

1. There is a label corresponding to the current image, curIndex = 0;

2. By default, automatic carousel is enabled.

Var autoChange = setInterval (function () {if (curIndex <$ (". imgList li "). length-1) {curIndex ++;} else {curIndex = 0;} // call the transformation processing function changeTo (curIndex) ;}, 2500 );

The default value is curIndex auto-increment, and then it is reset to 0.

3. Change the changeTo () function

function changeTo(num){     $(".imgList").find("li").removeClass("imgOn").hide().eq(num).fadeIn().addClass("imgOn");    $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");    $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");  }

Let's take a look ..

4. When the mouse slides in and out of the lower-right corner

$ (". IndexList "). find ("li "). each (function (item) {$ (this ). hover (function () {clearInterval (autoChange); changeTo (item); curIndex = item ;}, function () {autoChange = setInterval (function () {if (curIndex <$ (". imgList li "). length-1) {curIndex ++;} else {curIndex = 0;} // call the transformation processing function changeTo (curIndex) ;}, 2500 );});});

Slide into the cleanup timer and perform image switching. Set curIndex to the current item (do not forget)

Slide out to reset the timer and restore the default status

In this way, fade in and fade out.

Complete code

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
Ii. js native mode
The native method is to simulate jquery.
Because I use too many classes, I need to add some class processing functions (I can use id, which should be more convenient)
Use the class name to retrieve the label element (note, because now I only have one class for the label, multiple classes should have errors)

// Get the node function getElementsByClassName (className) {var classArr = []; var tags = document. getElementsByTagName ('*'); for (var item in tags) {if (tags [item]. nodeType = 1) {if (tags [item]. getAttribute ('class') = className) {classArr. push (tags [item]) ;}} return classArr; // return}
Simulate addClass and removeClass of jq

// Determine whether obj has this class function hasClass (obj, cls) {// The class is located at the return obj. className. match (new RegExp ('(\ s | ^)' + cls + '(\ s | $ )'));} // Add class function addClass (obj, cls) {if (! This. hasClass (obj, cls) {obj. className + = cls ;}}// remove the class function removeClass (obj, cls) {if (hasClass (obj, cls) corresponding to obj )) {var reg = new RegExp ('(\ s | ^)' + cls + '(\ s | $)'); obj. className = obj. className. replace (reg ,'');}}
Then simulate the fadeIn and fadeOut functions of jq.

// Fade-in processing function fadeIn (elem) {setOpacity (elem, 0); // initial fully transparent for (var I = 0; I <= 20; I ++) {// transparency change 20*5 = 100 (function () {var level = I * 5; // transparency change value setTimeout (function () {setOpacity (elem, level)}, I * 25); // I * 25 indicates the time interval for each transparency change. Set it by yourself}) (I ); // change every cycle} // fade out processing function fadeOut (elem) {for (var I = 0; I <= 20; I ++) {// transparency change 20*5 = 100 (function () {var level = 100-I * 5; // transparency change value setTimeout (function () {setOpacity (elem, level)}, I * 25); // I * 25 indicates the time interval for each transparency change. Set it by yourself}) (I); // Changes every cycle }}
Set the processing format of the transparency function.

// Sets the transparency function setOpacity (elem, level) {if (elem. filters) {elem. style. filter = "alpha (opacity =" + level + ")";} else {elem. style. opacity = level/100 ;}}
Then the basic part is used.
Initialize frequently used variables and automatic image Switching

Var curIndex = 0, // current index imgArr = getElementsByClassName ("imgList") [0]. getElementsByTagName ("li"), // obtain the image group imgLen = imgArr. length, infoArr = getElementsByClassName ("infoList") [0]. getElementsByTagName ("li"), // obtain the indexArr = getElementsByClassName ("indexList") of the image info group [0]. getElementsByTagName ("li"); // get control index group // The timer automatically changes 2.5 seconds each time var autoChange = setInterval (function () {if (curIndex 
Here, changeTo is the processing function, and addEvent is to set event processing for those buttons in the lower right corner.

// Function changeTo (num) {// sets image var curImg = getElementsByClassName ("imgOn") [0]; fadeOut (curImg ); // fade out the current image removeClass (curImg, "imgOn"); addClass (imgArr [num], "imgOn"); fadeIn (imgArr [num]); // fade-in target image // set the image's info var curInfo = getElementsByClassName ("infoOn") [0]; removeClass (curInfo, "infoOn"); addClass (infoArr [num], "infoOn"); // sets the index var _ curIndex = getElementsByClassName ("indexOn") of the image control subscript [0]; removeClass (_ curIndex, "indexOn "); addClass (indexArr [num], "indexOn") ;}// Add the event processing function addEvent () {for (var I = 0; I 
As a result, the native version has been completed
Complete code

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
The above is all the content of this article. I hope you will like it.