MUI 图片轮播

好久没有更新啦，最近慵懒了，不找那么多借口，马上就要年终结算了，还是希望能自己上线一款APP，给领导眼前一亮的感觉，希望最近一个月能勤快点，如果让我对年轻人说一句话，就是 晚点生娃，晚点生娃，晚点生娃，不然你会觉得时间根本不够用，我再写这篇文章的时候，我的女儿在外面看动画片，当然你不可能一直用动画片打发她，这样是很不负责任的，今天老婆开会，我也是给她幼儿园接回来，喂了饭，陪着一起念了五十分钟的三字经，刚刚开始看，等我写完这篇文章，还要给她洗澡，哄睡，所以说，都是泪。

说正事，图片轮播这个其实很好用，我用在APP首页，作为最新新闻来展示，图片的展示方式使人眼球敏感，然后三秒的轮播时间，让大家觉得APP很动态，每次登录从数据库取最新的五条新闻，首页展示图片，点击跳转图文页面即可，直接上代码代码分两段，第一段就是图片轮播的基本用法，非常非常简单，文档上介绍的：

//最外层轮播容器
 


// mui-slider-loop是是否需要循环，最后一张图片展示结束后，继续滑动屏幕是否能直接弹到第一张图片
//其实原理很简单，比如五张图片：1,2,3,4,5，我们只要在mui-slider-item 插入顺序5,1,2,3,4,5,1
//即可实现循环
		    	

		    		

			       
                
              
			    
			    
			    

			      
                
              
			    
			    
			    

			       
                
              
			    
			    
			      

			       
                
              
			    
			    
			      

			       
                
              
			    
			    
			      

			       
                
              
			    
			    
			    
                  

			       
                
              
			    
		    	
		    	//mui-slider-indicator是指图片上需要几个黑点
		    	

			    	

			    	

			    	

			    	

			    	

			    
		    

第二段是我自己的代码，大家会比较实用，基本大多数人也都是这样用，将图片存放在OSS服务器，地址，信息，作者，主题，内容插入数据库，每次登录选取最新的五条记录展示，动态的设置图片轮播

function get_news(){
				mui.get('http://*****/yqrcbapp/news/getnews',
				{
					//不需要参数
				},function(data){
					var data1 = JSON.stringify(data);
					var arr=JSON.parse(data1);
					//mui.toast(arr[0].img);
					var tmp = '
';
					var pic1 ='', pic2='', pic3='', pic4='', pic5='';
					for(var i=0;i
';
						else if(i==1)
							pic2+='
';
						else if(i==2)
							pic3+='
';
						else if(i==3)
							pic4+='
';
						else if(i==4)
							pic5+='
';
					}
					tmp+=pic5;
					tmp+=pic1;
					tmp+=pic2;
					tmp+=pic3;
					tmp+=pic4;
					tmp+=pic5;
					tmp+=pic1;
					
					tmp+='

'; //console.log(tmp); var home_slider = document.getElementById('home-slider'); home_slider.innerHTML = tmp; //手动调用图片的定时轮播 var gallery = mui('.mui-slider'); gallery.slider({ interval:3000//自动轮播周期，为0则不轮播 }); },'json'); }

其实原理就是组装一段H5代码插入即可，非常好用。写到今天也写了好几篇文章了，记录了我用到的一些控件用法，其实还有好多东西想记录下来，程序员也是人，脑子不可能记录这么多东西，也都是网络上一顿搜索，我也是从0开始，带着一点web基础过来的，等有时间了，我还是想把自己一点知识积累写下来，希望能给大家一点帮助，稍微截图几张我的APP，期待完成v1.0的那天，大概元旦前吧