轮播插件的导入（下）

1、我们上个内容已经把标题讲完，现在讲内容部分。

2、先在类名为dtbm这个div里面放置一个类名为contentbox的div标签对，用于放置内容。

3、在div标签对里面放置一个由ul li组成的无序列表。

4、在li标签里写我们所需要的内容，这里我们需要五个li标签。、

5、因为成功报名四个字颜色与其他字体颜色不一样，所以我们单独给它设置一个span标签。便于后面设置它的字体颜色。

6、现在初始的效果就是 每一段内容前面都有一个小圆点，这是无序列表自带的效果，我们后面需要把它去掉，内容字体颜色是黑色也要改变为浅灰色。

7、接下来我们要拉开每个li标签之间的距离，我们会用到line-height这个属性（内容垂直居中）；

8、设置span标签的内容字体颜色为橙色。设置左内边距和右内边距。

9、因为我们是向上轮播 所以我们需要复制这个五个li标签。

10、现在所有的内容都已经设置好了，就差引入轮播插件了。所以我们现在使用script标签引入两个插件。（也就是别人做好的js内容）

11、再放置一个script标签对，用于设置轮播插件内容。

12、在script里面写入一个jQuery().slide({}); 在jQuery后面那个小括号里面放置需要设置轮播的类名  例如 动态报名整个div类名为dtbm，那么这个括号写 “.dtbm” 。

 

13、里面开始写参数。（下图有基础参数 可参考）。

（1）maincell是需要切换元素效果的包裹层对象。

（2）autoPage是自动分页。

（3）autoPlay是自动运行。

（4）effect是动画效果，top也就是向上运动，top需要加双引号。

（5）vis是可视范围 也就是想让这个轮播展示几个内容，我们这里是五个，所以写5。

14、最后展示的整体效果就是所有内容向上移动。（图片看不出）

15、这样我们的文字向上轮播就做好啦！