您的位置：首页 > Web前端 > JQuery

jquery图片轮播效果(unslider)

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

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

效果预览：



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

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

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

<scriptsrc="//code.jquery.com/jquery-latest.min.js"></script> <scriptsrc="//unslider.com/unslider.js"></script>

2、页面中添代码


<divclass="banner"> <ul> <li>Thisisaslide.</li> <li>Thisisanotherslide.</li> <li>Thisisafinalslide.</li> </ul> </div>

此处要说明下，如果大家要放图片，那么直接放li内就可以，也就是所有你需要轮播的东西都放这里边就可以了。

3、添加CSS


.banner{position:relative;overflow:auto;}
.bannerli{list-style:none;}
.bannerulli{float:left;}


简单吧，就这几行，不过绝对能起作用，我当时稍改了下

4、开闸放水


.banner{position:relative;overflow:auto;} .bannerli{list-style:none;} .bannerulli{float:left;}


就这一行是绝对可以搞定的，我为了显示圆点可以点击的效果，开放了一个属性，具体细节参考官方文档说明吧。


另外，这货虽然很小，但是像左右箭头了、键盘控制了、轮播速度了，都是支持的，还支持触摸屏的，等等。

总之，好的东西是要推荐大家使用的，同时好的东西大家也是点赞的，谢谢unslider团队，给我们做出这么好的东西。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航