HTML5之Swiper学习练习《小猫钓鱼》故事书

HTML5之Swiper学习练习《小猫钓鱼》故事书

首先需要下载swiper.animate1.0.2.min.js和animate.min.css

然后需要导入Swiper，我是用了外链的方法，缺点就是必须有网才可以运行，大家也可以去官网下载js文件，引入文件如下！

接着引入css，我css是直接拿了官网的例子，加上CSS3控制内容动画效果

正文写内容，每个滑动页面的内容和js，js里面可设置滑动效果，如下

		 
    

        

        	
        	  

            		
            
            
            

            
            

            	　小猫的奶奶要来了，妈妈要小猫去河边钓几条新鲜的鱼给奶奶吃。

            	  小猫提着桶子，拿着鱼竿，嘴里哼着歌儿高兴地走着。
            	   　
            
            

          
            

            	 

            	  突然，它看见一只小兔，拿着球拍正在帮小刺猬把挂在树上的羽毛球弄下来，可怎么也弄不下来。小猫跑过去对它们俩说：“我帮你们弄下来。”
            	   　
            	 
            
            

            	 

            	  只见小猫举起长长的鱼竿，小心翼翼地把羽毛球勾了下来，小白兔和小刺猬连声：“谢谢你，小猫。”小猫来到河边把鱼竿抛进水里，静静地坐在河边一动也不动，等待小鱼上钩。
            	   　
            	 
            
            

             

            	  只见鱼钩轻轻地动了一下，小猫立马就把鱼竿提起来。“呀，钓到鱼啦！”小猫开心大叫。它把鱼钩上的小鱼取下来，又耐心地钓起鱼来，就这样，一个下午差不多过去了，小猫也准备回家了。
            	   　
            	 
            
            

            	

            	  在回家的路上，小猫看见了三只肚子饿得咕咕叫的流浪猫，小猫把鱼分给了三只流浪猫，提着一个空空的桶子回家了。
            	   　
            	 
            
            

            	

            	  妈妈见小猫提着空桶子回来了，很生气，小猫就把回家路上的事一五一十的告诉了妈妈，妈妈听了对小猫说：“儿子，你乐于助人，我为你骄傲。”
            	   　
            	 
            
            

            	

            	  小猫听了，开心地笑了。
            	   　
            	 
            
            

            
           
感谢
            
观看
             

             	
             
	 
            
        
    

    
    

    
    
	

注意设置的是手机大小，所有需要用手机才可以正常运行喔！完整代码如下

	
		
		
		
		
     	
     	
     	
     	
     	
     	
     	
     	
     	
     	
     	 
	
	
		 
    

        

        	
        	  

            		
            
            
            

            
            

            	　小猫的奶奶要来了，妈妈要小猫去河边钓几条新鲜的鱼给奶奶吃。

            	  小猫提着桶子，拿着鱼竿，嘴里哼着歌儿高兴地走着。
            	   　
            
            

          
            

            	 

            	  突然，它看见一只小兔，拿着球拍正在帮小刺猬把挂在树上的羽毛球弄下来，可怎么也弄不下来。小猫跑过去对它们俩说：“我帮你们弄下来。”
            	   　
            	 
            
            

            	 

            	  只见小猫举起长长的鱼竿，小心翼翼地把羽毛球勾了下来，小白兔和小刺猬连声：“谢谢你，小猫。”小猫来到河边把鱼竿抛进水里，静静地坐在河边一动也不动，等待小鱼上钩。
            	   　
            	 
            
            

             

            	  只见鱼钩轻轻地动了一下，小猫立马就把鱼竿提起来。“呀，钓到鱼啦！”小猫开心大叫。它把鱼钩上的小鱼取下来，又耐心地钓起鱼来，就这样，一个下午差不多过去了，小猫也准备回家了。
            	   　
            	 
            
            

            	

            	  在回家的路上，小猫看见了三只肚子饿得咕咕叫的流浪猫，小猫把鱼分给了三只流浪猫，提着一个空空的桶子回家了。
            	   　
            	 
            
            

            	

            	  妈妈见小猫提着空桶子回来了，很生气，小猫就把回家路上的事一五一十的告诉了妈妈，妈妈听了对小猫说：“儿子，你乐于助人，我为你骄傲。”
            	   　
            	 
            
            

            	

            	  小猫听了，开心地笑了。
            	   　
            	 
            
            

            
           
感谢
            
观看
             

             	
             
	 
            
        
    

    
    

    
    
	

效果展示

最后完成项目可以在我的资源里下载喔，该项目是我学习练习只用，比较简单！
送上链接：https://download.csdn.net/download/sinat_41859231/11106988