本篇教程学习的是店铺装修-J_TWidget库做全屏轮播,喜欢的一起来学习吧。
那我们开始今天的教程吧。
1.新建【HTML文件】,写个div,写个style,高度600px,里面创建一个class,叫footer-more-trigger,写个style,padding值清掉,border值也清掉,left值给个50%,top值给个auto,定义宽度1920px,高度600px,这是最外层的盒子。
2.创建一个div,创建个class,footer-more-trigger,还是写style样式,把一些该清的清掉,left值-960px,top值为0,宽度1920px,高度600px,这个时候图片就居中了,在放大和缩小的时候,它也是居中元素了,这个就是全屏海报了。
3.做一个3张图的轮播,写个div,写个class,J_TWidget,写个data-widget-type,类型选择旋转木马类型Carousel,写个data-widget-config,写个“”,里面写个{},这是一个配置项,稍后来进行配置,这个就是做轮播最外层的框架。
4.在框架里面有三个子元素,第一个是span标签,写个class,写个prev,下面定义为next,第三定义个div,写个class,写个bnrOut,添加style,宽度1920px,高度600px,这个就是父级,在父级里面插入两个子级。
5.一个div,创建bnrContent,另一个是ul,起个类