首页 技术 正文
技术 2022年11月7日
0 收藏 851 点赞 585 浏览 1094 个字

今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货unslider.js。

网址:http://www.bootcss.com/p/unslider/

效果预览:

jquery图片轮播效果(unslider)

在此要批评下unslider的制作人员,好坏在网站上提交个demo啊,让用的人可以直接下载查看效果,同时可以参考啊,可是没有,呵呵,如果他们有时间应该做一个的,我到是想给他们做一个,又担心人家不要,要是要的话,联系我,我把我的demo给你们传上去,git上提供的那个貌似demo,可是下载下来不能运行,也许是我的错,不管怎样,我搞定了,下面是心中历程。

官方的说明还是相当简单的,共4步

1、引用js,这都能看懂,不过要是你觉得网慢,把这两货下载下来,可能会好点,另外unslider.js有压缩版的,比这个小几k吧,虽然差别不大,但引用的多了,就有作用了,呵呵总共才几k。

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>
2、页面中添代码
<div class="banner">
<ul>
<li>This is a slide.</li>
<li>This is another slide.</li>
<li>This is a final slide.</li>
</ul>
</div>
此处要说明下,如果大家要放图片,那么直接放li内就可以,也就是所有你需要轮播的东西都 放这里边就可以了。
3、添加CSS
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }
简单吧,就这几行,不过绝对能起作用,我当时稍改了下
4、开闸放水
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }
就这一行是绝对可以搞定的,我为了显示圆点可以点击的效果,开放了一个属性,具体细节参考官方文档说明吧。
 
另外,这货虽然很小,但是像左右箭头了、键盘控制了、轮播速度了,都是支持的,还支持触摸屏的,等等。
总之,好的东西是要推荐大家使用的,同时好的东西大家也是点赞的,谢谢unslider团队,给我们做出这么好的东西。
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,075
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,551
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,399
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,176
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,811
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,893