前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

企业网站中的横向滚动的实现(网页制作怎么设置滚动)

在做企业网站的时候,经常能碰到这样的情况:在某个区域显示供应商或者是合作伙伴的图标,以显示公司的可靠性。

滚动显示合作伙伴

效果如上图显示,两边的黄线是为了突出显示,实际应用中请自己设置。

如何实现的呢?

1、自己写jquery或者javascript实现,当然可以。不建议这样做(大神除外),当然如果发生兼容性问题的时候,不得不自己写。

2、使用现成的插件实现,好多;今天我们就用一款国外比较流行的插件:owl.carousel.min.js来实现。

下面是具体的步骤:

首先:HTML代码:

⑴,依次引入jquery库和owl.carousel.min.js插件;见下图:

引入jquery库和owl.carousel.min.js

⑵依次引入owl.carousel.min.css和支持的皮肤css

引入owl.carousel.min.css

⑶书写结构:

html结构

⑷书写owl.carousel.min.js参数,如下图:

书写参数

⑸书写css文件,注意,这是包裹的容器,而不是插件本身的css,如果需要修改插件本身的css,请修改owl.carousel.css。见下图:

css样式

这样,就搞定了,如第一张动图的效果,如果自己定制一些样式,和滚动选项就需要花一点时间来研究了。

号外,如果需要详细的参数说明,请在评论区留言,我会再写一篇文章来说明的。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言