JavaScript交互特效案例实战

1、图片切换  getElementById   onclick   setAttribute   `${}`

	
	


	
	
	

	上一张
	下一张
	

 2、显示和隐藏图片    getElementsByTagName    onclick    innerHTML    newImg.style.display

	
	


	隐藏
	

	
	

 3、衣服相册    鼠标悬浮小图，大图随小图改变。  类似淘宝网商品详情页，顶部相大图相册。

 4、关闭小广告    

	
	
	


	

		
		X
	
	

 5、初学者小白实现图片切换   

 6、图片切换   通过函数优化的方法： 封装图片切换代码。

 7、图片切换最终效果，完整版

 8、百度换肤效果    

 9、百度换肤 打开皮肤窗口，通过点击x关闭皮肤窗口

    
    
    


    

    

        

            

                
            
            

                
            
            

                
            
            

                
            
        
        X
    
    更换皮肤

    

 10、千千音乐盒实现全选，反选

	
	
	


	

	        

	            
千千音乐盒
	            
 
	        
	        

	            漂洋过海来看你 
 
	            一眼万年

	            后来 

	            没那么简单 

	            如果你要离去 

	            恋恋风尘 

	            南山南 

	            涛声依旧 

	            可惜不是你 

	        
	        

	            

	            全选
	            取消选中
	            反选
	        
   	 
   	 

 11、表单验证    用到的知识点： label for   onblur    onfocus    parseFloat    isNaN    innerHTML    outline

	
	
	


	

		您的成绩：      
		 
		请输入您的成绩     
	
	

 12、上传图片格式验证   涉及到的知识点：window.onload    onchange    lastIndexOf    substr    toLowerCase    或者||    并且&&

	
	
	


	上传图片格式验证:
	

 13、随机验证码    涉及知识点：  window.onload    random    Math.floor    innerHTML    window.location.href    toUpperCase