在如今的网站首页，app首页，轮播的幻灯片几乎是必备的元素了，参考淘宝、微博

微博banner

淘宝banner

可以用最少空间，展示丰富的内容，而且都是在最显眼的位置，可见其重要性。

这种功能，对于互联网前端开发来说，简直就是小菜一碟了，

今天我们就来看看如何实现:

为了实现代码的重用，我用PHP yii2框架，这是一个很好用的开发框架，我已经用了近10年的时间了，

功能非常容易封装，一般这种常用的小组件，都是封装成widgets进行使用：

先看代码组织架构：

资源文件

一般我们建立一个单独的目录，widgets，先看widget的定义

widgets/SlideWidget.php

namespace yoga\widgets;use yii\base\Widget;class SlideWidget extends  Widget {	public $img_list;	public function init(){		parent::init();	}	public function run(){		return $this->render('slide', ['img_list' => $this->img_list]);	}}

使用的html文件，也就是view文件，

widgets/views/slide.php

<style type="text/css">.img_con{position: relative;}.img_con div{position: absolute;top: 0px;left: 0px;opacity: 0}</style><div class="img_con">	<?php  foreach($img_list as $k=> $v):?>	<div class="<?php if($k==0)echo 'current';?>">		<img src="img/banner/<?=$v?>">	</div><?php endforeach;?></div>

js部分

<script type="text/javascript">	function slide(){		current = $('.current');		index = $('.current').index()		if(index == 2){			next = $('.img_con div:first')		}else{			next = $('.current').next();			}		current.removeClass('current').animate({'opacity':0});		next.addClass('current').animate({'opacity':1.0});	}	$('.current').css({'opacity':1.0});	setInterval("slide()", 3000);</script>

实现原理就是动态改变div的opacity属性，此属性控制属性的透明度，div的隐藏和显示

间隔3s进行切换。

调用方法：

widget的调用一般是在MVC的V部分，就是view里，

在TestController.php，渲染img.php

通过参数可以给widget传递参数，是一个数组，对于widget里定义的属性，会自动赋值，非常的方便。

viewes/test/img.php

<?php use yoga\widgets\SlideWidget;use yii\web\JqueryAsset;JqueryAsset::register($this);//一般这里读取数据库数据$img_list = ['1.png', '2.png', '3.png'];echo SlideWidget::widget(['img_list' => $img_list]);?>

展示效果图（不会做gif动图）：

轮播

总结：

我们在代码开发，一定要注意代码的封装，第一次可能会麻烦一些，但是对后面的重用，会容易得多。