There are already N kinds of plug-ins on the Internet, such as:
swiper,
SuperSlideSo I am not going to develop a complete one, here is a simple slide3D, easy to introduce the implementation principle of the rotation.



Click here to see an example: simple rotation example


Download at Github: github.com/IronPans/sl…


1, the layout


Layout (
slideSwitching effect)
Need the following
: 

       
   
  
        
   
    
         
   
      
             
    
         
   
    
         
   
      
             
    
         
   
    
         
   
      
             
    
         
   
    
         
   
      
             
    
         
   
    
         
   
      
             
    
         
   
  
        
   
  
        
   
  
        
   
  
        
   

       

Copy the code

Other switching effects (
Flip, turn, flat, fragmentLayout: 

       
   
  
        
   
  
        
   
  
        
   
  
        
   

       
Copy the code

The image is defined in a JavaScript script.


2. Initialize


use
new Slide3D(contianer, params)Initialize one
Slide3D, returns the initialized
Slide3DInstance. 
Var mySlide = new Slide3D('. Flip ', {width: 300, height: 400, // define high direction: 'horizontal | vertical', / / switch direction, only slide support effect: 'flip', / / switching effect flip | turn | slide | flat | fragments sources: ['image-slider-1.jpg', 'image-slider-2.jpg', 'image-slider-3.jpg', 'image-slider-4.jpg', 'image-slider-5.jpg'], // Slide effects do not require rows: 6, // cols: 3 // columns}, pagination: True, // whether to add pager loop: true // whether to add pager loop.Copy the code



3, source code analysis


Let’s talk about it first
slideSwitch effect, I believe you are right
slideSwitching effect will be realized, the difficulty is to cycle, how to achieve it?


I am using
wrapper3DThis is the layer that slides.


In fact, the principle is not difficult, look at the following code: 
if(s.params.loop) {   
  var firstChild = s.wrapper.firstElementChild.cloneNode(true);   
  var lastChild = s.wrapper.lastElementChild.cloneNode(true);   
  s.wrapper.appendChild(firstChild);   
  s.wrapper.insertBefore(lastChild, s.wrapper.firstElementChild);   
  s.setTransitionDuration(s.wrapper, 0);   
  s.currentIndex = 1;   
  s.slideTo(s.activeIndex + 1);   
};
Copy the code

The code above means that when detected
loopProperties for
trueWhen, we will be the first
slide3DAnd the last one
slide3DCopy the contents of, and insert them as the last and first child, respectively
wrapper3DElement.
If you open the console, the code looks like this: 

       
   
  
        
      
    
         
  
      
                
    
         
/* omit the original 5 slide3D */
         
      
      
                
    
         
     
  
        
/* Omit the pager and the forward and backward buttons */
       
Copy the code

Of course, that’s not enough. We need to get
wrapper3DElement slide one
slide3DThe width of the element, otherwise you will see the last image. 
s.slideTo(s.activeIndex + 1); s.slideTo = function(index) { if(s.params.direction == 'horizontal') { s.setTransform(s.wrapper, 'translate3d(-' + (s.params.width * index) + 'px, 0, 0)'); }};Copy the code

Add the code above and you have the first image.


Again, how do you switch between the first slide and the last slide?


The answer is simple, let’s say we have five rotation diagrams, each of which is 400 in width, then after the above code processing,
wrapper3DElements of the
transformIt goes like this: 
transform: translate3d(-400px, 0, 0)Copy the code

I’m sure you remember that our first image is actually our last image, so to switch from the first image to the last image, just do this: 
transform: translate3d(-400px, 0, 0)  =>  transform: translate3d(0, 0, 0)Copy the code

When the switch is complete, we need to put
transition-durationSet it to 0, then: 
transform: translate3d(-400 * 5px , 0, 0)Copy the code

Transition-duration = 0, so the transition is instantaneous, which tricks our eyes, so we can’t see it.


This is how the slide toggle loop works, of course, there are more ways you can try it, but the other toggle loops (flip, turn, Flat, fragment) are pretty much the same.


The first thing to do is to classify the image:

var r = s.params.box.rows; var c = s.params.box.cols; var width = Math.ceil(s.params.width / c); Var height = math.ceil (s.params.height/r); Var length = total = r * c; Var cssText = ''; for(var i = 0; i < length; i++) { var left = i % c * width; var top = Math.floor(i / c) * height; var flipItem = document.createElement('div'); if(s.params.effect == 'fragment') { cssText += 'opacity:0; '; }; cssText += 'position:absolute; left:' + left + 'px; top:' + top + 'px; '; cssText += 'width:' + width + 'px; height:' + height + 'px; '; cssText += 'background-image:url(' + url + '); '; cssText += 'background-position:-' + left + 'px -' + top + 'px; '; cssText += 'background-size:' + s.params.width + 'px ' + s.params.height + 'px; '; cssText += 'background-repeat:no-repeat; '; flipItem.style.cssText = cssText; flipItem.change = false; animation[s.params.effect].execute(flipItem); // Remember this function, s.whopper. appendChild(flipItem); / / insert};Copy the code

It is estimated that you will see the above code will be more chaotic, the principle is similar to the table, equivalent to a TD corresponding to a div, their own code to achieve partition try to know.


Let’s analyze the fragment switching effect:

Define an animation function:

animate: function(item, fn, fnEnd, index) { var opacity = 0; var data = []; clearInterval(item.timer); Item.timer = setInterval(function() {// Use a timer for animating += 0.05; Data ['opacity'] = opacity; data['index'] = index; if(fn) fn.call(item, data); Opacity >= 1 {clearInterval(item.timer); if(fnEnd) fnEnd.call(item); }}}, 20);}}};}}}; }Copy the code

Animate each item (that is, each cell) and pass the parameter.

>animation[s.params.effect].execute(flipItem);Copy the code

The following code is executed:

(function(item) { setTimeout(function() { animation[s.params.effect].animate(item, function(data) { item.style.opacity = data['opacity']; }, function() {if(--total == 0) {if(--total == 0) {// When all items are animated, execute the code in the if block. s.lock = false; end(); s.wrapper.style.backgroundImage = 'url(' + s.params.sources[s.activeIndex] + ')'; } }, i); }, i * 50); })(item);})(item);})(item); // Execute the function immediatelyCopy the code

Other switching effects work the same way.


Once you understand the principles, you can develop even cooler effects.


If you have any questions, feel free to ask them below!


The copyright belongs to the blogger. Please contact the blogger for authorization and mark “blogger name”.