轮播图是网站中必不可少的技术之一,本案例用精简、快速、容易理解的方法实现常见轮播图的效果。
工具/原料
Hbuild或Dreamweaver编辑器
方法/步骤
1
一般来说:在网站banner(广告)的位置会放置一个轮播图,实现图片自动切换的动态网页效果。实现轮播图的方法比较多,可以用jQuery或javaScript实现,也可以用前端框架bootstrap实现。实现效果的代码比较成熟,不需要我们自己写,只需要把现成的代码改造一下就可以了。下面我们就用CSS+div和jQuery快速实现轮播图的效果,总的说来需要3步,第1步复制粘粘html结构,第2步引入编辑好的CSS样式,第3步引入编辑好的jQuery文件即可。先看整体效果:
2
具体步骤如下:将html结构代码复制粘贴到需要放置轮播图的位置,比如主导航栏的下面。html结构代码如下:
3
把控制轮播图的CSS样式文件引入到当前网页的head标签中,引入代码为:ban2.css样式文件的代码如下:
上一篇:网站建设的顺序是什么
下一篇:网站建设(1)了解建站:[1]