Said in front

Like and learn the front-end, lurching to come all the way, should also for almost a year now, more or less a day would have to “read” people wrote the article, a lot of learning and comprehension, as a want to become stronger the front end of the little brother, at this point, also want to write something, a complete own a small goal, also is the future, Mistakes or suggestions to hit over, anyway I head iron, hey hey.

Cause and effect & Code Address

A few days ago, the project needs, I luked a JavaScript image rotation, plus read a lot of not Jquery, JavaScript directly on the article, it suddenly occurred to me, I also write a JavaScript without relying on the front-end use of Jquery image rotation. JavaScript IE9+ image wheel broadcast portal, link address is a few days ago on the same nuggets, I posted to share my own Github Demo address, because just wrapped this picture wheel broadcast, can’t wait to share with you. So the article did not write on the direct, now think, feel it is necessary to write something.

Requirements & Results

Beautiful gentle natural UI given little sister is similar to the shown on the design of wheel, grey, white round part of the picture is the index of the column position, point number and according to them by figure number, the white part can be seen as image display area, and the grey part actually also is transparent, can only see the white circle, in order to avoid the picture is white substrate, The white circle should also have a gray border.

  • 1. Automatic rotation and rolling
  • 2. Drag to scroll
  • 3. Index click scroll
  • 4. Image hyperlink jump (I can’t see this, but I added it)
  • 5. Switching effects (this is considered to hide fixed requirements)

Multi-thought discussion

Idea Prototype 1

Generally, the design prototype of the rote map I have seen is to arrange all the pictures in a linear manner, controlled by margin-left or position+left, etc., and realize scrolling by changing the offset value of the whole or each single element (margin-left or left to realize scrolling and switching). However, when the offset is, Overall node structure will not change, as the chart color chart, the black box for the user to the eye can see them actually, in so doing, going to generate all the elements in the initial state color, scroll, change the loading than a change of color piece of the deviation of the overall solution Each piece of the offset scheme to better, because the latter scheme are too many in color piece, Js operates on more objects, resulting in higher performance costs.

My thinking prototype

I use 3 color blocks to load the image, like a revolver, I only have 3 cartridges here, what image will load each time I look at it, initially, position “2” loads the first image, position “3” loads the second image, and position “1” loads the last image

Draggable interaction
Seamless loop
Idea Prototype 1
Idea Prototype 1
Seamless loop
Idea Prototype 1

Code implementation

This part of the content, want to know the small partner or directly go to see it, is my own write, like to star oh, English is not good students, please use Chrome right click translation Chinese JavaScript IE9+ picture round broadcast portal code is mainly

  • 1. Initialize the container and roll the event binding (must be delegate event listener!!) , load the content and start timed scrolling
  • 2. When the drag event is triggered, determine the direction of the drag event and whether to scroll
  • 3. When scrolling, operate 2 JS object offsets and add CSS translation transition to achieve the effect. Then delete invisible JS objects and add JS nodes on the other side to determine whether the current image index needs to restart from the beginning or the end and load the image.

Pop a few questions

  • 1. Why delegate events
  • 2. Js timing 5s must be 5 seconds apart

In addition, the CSS switching effect of index points is completely based on CSS translation+ Width +left, which is also inspired by one of our big dig brothers – incredible pure CSS navigation bar underline following effect.

conclusion

This JavaScript image rotation first said shortcomings, compatibility is general, need IE9+, mobile phone should be no problem, but I have not tested, and scrolling always to keep operating the rotation node object, this point, this kind of image rotation is indeed… Anyway, performance is certain to sacrifice, moreover, click the index point switch, not adjacent pictures quickly switch (switch diagram in the other switch) there will be seam, sometimes also a big headache, ah ah, anyway, we are happy, at this stage will not optimize oh. The advantages… Can be used… Ok… It’s kind of interesting. All right, let’s do that. Hey hey: P