MUI 图片轮播

版权声明: https://blog.csdn.net/dreamxie0326/article/details/84035080

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

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

//最外层轮播容器
 <div class="mui-slider">

// mui-slider-loop是是否需要循环,最后一张图片展示结束后,继续滑动屏幕是否能直接弹到第一张图片
//其实原理很简单,比如五张图片:1,2,3,4,5,我们只要在mui-slider-item 插入顺序5,1,2,3,4,5,1
//即可实现循环
		    	<div class="mui-slider-group mui-slider-loop">
		    		<div class="mui-slider-item ">
			       <a href="#">
                <img src="../img/xc/xc5.png">
              </a>
			    </div>
			    
			    <div class="mui-slider-item">
			      <a href="#">
                <img src="../img/xc/xc1.png">
              </a>
			    </div>
			    
			    <div class="mui-slider-item">
			       <a href="#">
                <img src="../img/xc/xc2.png">
              </a>
			    </div>
			    
			      <div class="mui-slider-item">
			       <a href="#">
                <img src="../img/xc/xc3.png">
              </a>
			    </div>
			    
			      <div class="mui-slider-item">
			       <a href="#">
                <img src="../img/xc/xc4.png">
              </a>
			    </div>
			    
			      <div class="mui-slider-item">
			       <a href="#">
                <img src="../img/xc/xc5.png">
              </a>
			    </div>
			    
			    
                  <div class="mui-slider-item ">
			       <a href="#">
                <img src="../img/xc/xc1.png">
              </a>
			    </div>
		    	</div>
		    	//mui-slider-indicator是指图片上需要几个黑点
		    	<div class="mui-slider-indicator">
			    	<div class="mui-indicator mui-active"></div>
			    	<div class="mui-indicator"></div>
			    	<div class="mui-indicator"></div>
			    	<div class="mui-indicator"></div>
			    	<div class="mui-indicator"></div>
			    </div>
		    </div>


<script type="text/javascript">
			mui.init()
        //手动调用图片的定时轮播
					var gallery = mui('.mui-slider');
					gallery.slider({
					interval:3000//自动轮播周期,为0则不轮播
						});
		</script>

第二段是我自己的代码,大家会比较实用,基本大多数人也都是这样用,将图片存放在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 = '<div class="mui-slider-group mui-slider-loop">';
					var pic1 ='', pic2='', pic3='', pic4='', pic5='';
					for(var i=0;i<arr.length ;i++){
						if(i==0)
							pic1+='<div class="mui-slider-item "><a href="#"><img src="'+arr[i].img+'"></a></div>';
						else if(i==1)
							pic2+='<div class="mui-slider-item "><a href="#"><img src="'+arr[i].img+'"></a></div>';
						else if(i==2)
							pic3+='<div class="mui-slider-item "><a href="#"><img src="'+arr[i].img+'"></a></div>';
						else if(i==3)
							pic4+='<div class="mui-slider-item "><a href="#"><img src="'+arr[i].img+'"></a></div>';
						else if(i==4)
							pic5+='<div class="mui-slider-item "><a href="#"><img src="'+arr[i].img+'"></a></div>';
					}
					tmp+=pic5;
					tmp+=pic1;
					tmp+=pic2;
					tmp+=pic3;
					tmp+=pic4;
					tmp+=pic5;
					tmp+=pic1;
					
					tmp+='</div><div class="mui-slider-indicator"><div class="mui-indicator mui-active"></div><div class="mui-indicator"></div><div class="mui-indicator"></div><div class="mui-indicator"></div><div class="mui-indicator"></div></div>';
					//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的那天,大概元旦前吧

展开阅读全文

没有更多推荐了,返回首页