在如今的网站首页，app首页，轮播的幻灯片几乎是必备的元素了，参考淘宝、微博，现在小编就来说说关于轮播图用什么工具?下面内容希望能帮助到你，我们来一起看看吧!
轮播图用什么工具
在如今的网站首页，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动图）：
轮播
总结：
我们在代码开发，一定要注意代码的封装，第一次可能会麻烦一些，但是对后面的重用，会容易得多。
