How to achieve image switching animation effect in javascript (code)

The content of this article is about how to achieve the animation effect (code) of image switching in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, the rendering is roughly like this. Click the button on the left to switch pictures.

It seems quite simple, but there are still several difficulties, so I will pick this case out and analyze it carefully.

Step One: Layout

	
		
		
	

	
	
		

			
			- / -
			
图片描述正在加载中...
			

				

				

				

				

				

				
			
		

	

Step Two: Data and Initialization

1) Find the data

2) Initialize the page

Step 3: Switch the picture. So far, the function of switching pictures and displaying text has been realized, but the effect of the ul next to it has not been realized yet

var oLi = oUl.getElementsByTagName('li');

//切换图片
			for(var i=0;i
Step 4: Implement the class style of li addition. 
Idea 1:
Clear all li styles and add them to whichever one you click. 
var oldLi = 0;

//初始化
oLi[oldLi].className = 'active';

//在点击事件中
//循环将class清空
			for(var j=0;j
 Idea 2: 
Clear the previous one, currently add 
Define a variable, oldLi stores the previous value clicked
The default is 0
When we click the next one, the one that will be 0 (default) will be cleared. 
And record the index custom attribute oldLi of the currently clicked li = this.index;
Then set the class attribute of the current li
oLi[oldLi].className = '';
					oldLi = id;
					this.className = 'active';
Completed;
Post the complete code and screenshots below


    
        
        
    

    
    
    
        

            
            - / -
            
图片描述正在加载中...
            

                
            
        
    
Related recommendations:
How to implement import and export in javascript (with code)
Animation effects of native js carousel renderings (with code) 
The above is the detailed content of How to achieve image switching animation effect in javascript (code). For more information, please follow other related articles on the PHP Chinese website!