Native JS achieves constant speed image carousel animation, while js achieves constant speed

Native JS achieves constant speed image carousel animation, while js achieves constant speed

JS implementation carousel diagram implementation result diagram:

Requirements:
1. dynamically add small dots Based on the Image
2. Move the target to a small dot carousel Image
3. Move the mouse away from the image and regularly rotate the image; pause when the mouse is on the Image
4. You can click carousel images on both sides of the page.

I. Layout

Html section

<Div class = "w main clearfix"> <! -- Start the main content section --> <div class = "slider"> <! -- The slideshow part starts --> <ul class = "imgs" id = "slider_imgs"> <li>  </li>  </li>  </li>  </li>  </li>  </li> </ul> <div class = "arrow" id = "arrow"> <a href = "javascript :; "class =" arrow_1 "> </a> <a href =" javascript :; "class =" arrow_2 ">></a> </div> <! -- The slideshow part ends --> </div>

Css Section

.slider ul.imgs{height:453px;width:4380px;position:absolute;}.slider ul.imgs li{display:block; width:730px;height:453px;float:left;}.slider .circle{position:absolute;left:50%;bottom:8px;}.slider .circle li{cursor:pointer;float:left;width:18px;height:18px;margin:4px;background-color:#3e3e3e;border-radius: 50%;text-align: center;color:#fff;}.slider .circle li.current{background:pink;color:white;}

JS Section

1. This is the encapsulation of a uniform animation function.

/*** Obj: animated DOM object *** target: the final motion of the object to the target position (X axis) */function animate (obj, target) {// clear the timer clearInterval (obj. timer); // The moving direction is determined based on the target location. The step size is 20 at each target location; otherwise, the value is-20 var speed = target> obj. offsetLeft? 20:-20; obj. timer = setInterval (function () {var left = obj. offsetLeft; obj. style. left = left + speed + "px"; var result = target-left; // if (Math. abs (result) <= 20) {// stop the motion clearInterval (obj. timer); // if there is a 20-pixel gap, we can directly jump to the target position obj. style. left = target + "px" ;}}, 2 function: 'write code piece 0 here );}

Carousel image encapsulation function:

Function slider () {// DOM node var imgs = document. getElementById ("slider_imgs"); var slides = imgs. parentNode; var lis = imgs. getElementsByTagName ("li"); var arrows = document. getElementById ("arrow"); var arrowLink = arrows. children; // create a small dot var circle = document. createElement ("ol"); circle. setAttribute ("class", "circle"); imgs. parentNode. appendChild (circle); for (var I = 0, len = lis. length-1; I <len; I ++) {var li = document. createElement ("li"); li. innerHTML = I + 1; circle. appendChild (li);} // marginLeft =-imgli (length) * olLi (width)/2 circle. style. marginLeft = (-13 * len) + "px"; var olLis = circle. children; olLis [0]. className = "current"; // Add a mouse event for the dot (var I = 0; I <olLis. length; I ++) {// current small dot index olLis [I]. index = I; olLis [I]. onmouseover = function () {for (var j = 0; j <olLis. length; j ++) {olLis [j]. className = "";} this. className = "current"; // the CSS section of the image switching imgs plus the positioning animation (imgs, this. index * (-lis [0]. offsetWidth); // when the mouse moves to the timer, the current playback image and the origin position go back to the original k = z = p = q = this. index ;}}// move the cursor to the carousel image to play slides on an irregular basis. onmouseover = function () {// clear automatic carousel timer clearInterval (Time) ;}; // move the mouse away to automatically carousel slides. onmouseout = function () {Time = setInterval (autoPlay, 1000) ;}; // timer part var Time = null, k = 0, z = 0; Time = setInterval (autoPlay, 1000); // automatic carousel image, Timer Time function autoPlay () {k ++; if (k> lis. length-1) {imgs. style. left = 0; k = 1;} animate (imgs, k * (-lis [0]. offsetWidth); z ++; if (z> olLis. length-1) {z = 0 ;}for (var j = 0; j <olLis. length; j ++) {olLis [j]. className = "";} olLis [z]. className = "current";} var q = 0; var p = 0; arrowLink [1]. onclick = function () {q ++; if (q> lis. length-1) {imgs. style. left = 0; q = 1;} p ++; if (p> olLis. length-1) {p = 0 ;}for (var j = 0; j <olLis. length; j ++) {olLis [j]. className = "";} olLis [p]. className = "current"; animate (imgs, q * (-lis [0]. offsetWidth ));}}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.