jquery图片轮播效果(unslider)

时间：2022-05-18 06:27:24

今天做网站（住建局网站）需要用到图片轮播，刚开始想借鉴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团队，给我们做出这么好的东西。

相关文章