开发工具与关键技术:VS+MVC
作者:茅凯翔
撰写时间:2019年6月4日
很多页面都会用到轮播是吧!轮播用于展示一些广告、图片之类的。轮播可以自动的播放图片,也可以自动循环播放着里面的图片,在一些官网的主页面都会有轮播效果,用于展示这个网页新推出的东西,起到很好的宣传效果。通常的轮播都是通过js实现的,现在我来介绍一个快捷的方式(来自Layui的插件)。之前我就简单的介绍过Layui现在我来介绍Layui的轮播插件。以下就是整体的轮播,我这只是695×240px(像素),比较小,你用了的话,大小随你处置。轮播三个常见的功能分别是图片、箭头和指示器。
首先把Layui的css样式拉出来,因为人家都已经把css的样式封装起来了,我们只要拉出来就好了。外层的div元素的类(class=“layui-carousel”)是用来标识为一个轮播容器的,所以不可更改,id的就可以你自己给了。内层的div元素的(carousel-item)是用来标识条目的,也就是后面的每个div元素。然后后面的每一个图片都用div包裹着,若你想图片不仅可以观看,也可以供用户使用,你可以给每个图片加a标签跳转到别的页面去,详细的在下图。但你最好给图片加固定的宽度和高度。然后把你要展示的图片拉进你的项目里,建一个文档,专门放图片的,然后用src来获取图片。