轮播框架

深藏阁楼爱情的钟 2022-01-30 13:19 171阅读 0赞

**轮播框架**

轮播框架是为了呈现出图片的切换，使页面变得整洁，它就是个盒子，把零散的东西装起来。使地方更加干净、整洁。轮流播放图片，我们可以设置手动切换，它也可以自动按定时器的时间切换。本文是用来插件来实现的，也是作者第一次成功实现轮播效果的操作，还是用在项目里的。实现后发现，它简单，简洁，好看。所以说轮播效果不仅是实现页面的整洁性，也实现了可观性。它整体的操作只有三部分，代码也少，不像轮播原生代码及其多，缩短了代码，所以它就变得简单了。
    第一部分：因为是用了插件实现的，所以先引用插件。

<!—layui.css插件--> //可见内容 以上就是整个文档的结构，与之间的文本描述网页。 与之间的文本是可见的页面内容。 还有许多元素标签都在它们之间，例如：

# 与 #

之间的文本被显示为标题。

与

之间的文本被显示为段落。 第二步：轮播框架的HTML部分，也就是轮播的布局或搭建。 首先是定义一个盒子/类，是标识轮播容器的类，类的名字class是使用插件的，因为框架的样式都是在插件里搭建好的，所以插件才那么好用，是别人搭建好的，封装好的类。第一个盒子是搭建框架的，接下来的盒子就是放图片的，也就是标识哪张图片所在的哪个盒子里的，最后一个是装图片的，然后每张图片外面都放一个盒子，就相当于是盒子在转动，图片只是装在盒子里，图片用img标签装载，img标签，他的src路径找到图片。

![Alternate Text][]

第三步：执行轮播js部分 layui.use('carousel', function () \{ var carousel = layui.carousel; //建造实例 carousel.render(\{ elem: '\#test1' , width: '100%' //设置容器宽度 ,height:'700px'//设置容器高度 , arrow: 'always' //始终显示箭头 //,anim: 'updown' //切换动画方式 \}); \});//轮播JS 首先用layui.use方法渲染，然后创建实例，接着就是执行渲染，（render），elem元素是获取元素的，获取ID，然后设置框架的样式，代码是设置宽度，高度，最后两个箭头的显示。轮播的三部分就是这样，及其简单，下截图就是成功轮播效果的案例。 !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20190519182433216.png)

[Alternate Text]: