很多网站都会有轮播图, 网上也有各种插件, 今天推荐一个基于 jQuery 的一个库, 非常方便, 这个库也是非常小, 压缩之后的代码只有 43KB, 几乎涵盖了所有形式的轮播图, 想用什么直接上去找就行
官网的首页也有很多demo
用法也是相当简单, 先看一个demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播</title> <link rel="stylesheet" type="text/css" href="../slick-1.8.0/slick/slick.css"> <link rel="stylesheet" type="text/css" href="../slick-1.8.0/slick/slick-theme.css"> <style type="text/css"> * { margin: 0; padding: 0; } .single-item { height: 300px; width: 500px; margin: 0 auto; } .single-item div { background-color: #aaa; height: 100%; } .single-item .slick-prev { left: 25px; z-index: 999; } .single-item .slick-next { right: 25px; z-index: 999; } </style> </head> <body> <div class="single-item"> <div>1</div> <div>2</div> <div>3</div> </div> </body> <script type="text/javascript" src="../emoji/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="../slick-1.8.0/slick/slick.js"></script> <script type="text/javascript"> $('.single-item').slick(); </script> </html>
需要吧jq进入到项目中, 初始化, 一行代码就ok了
效果就是这样
更多样式请参考官方demo给出的方法