轮播图用什么工具（大厂常用的轮播图）

在如今的网站首页，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动图）：

轮播

总结：

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