<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>轮播测试例子</title> <style type="text/css"> body,ul,ol{margin: 0; padding: 0;} ul,ol{list-style: none;} .li1{background-color: #000;} .li2{background-color: #333;} .li3{background-color: #666;} .li4{background-color: #999;} .example{margin-left: 300px;} .example ol { position: absolute; padding-left: 80px; width: 186px; height: 20px; top: 186px; left: 0px; background: #fff; cursor: pointer; } ol li{ float: left; width: 10px; height: 10px; margin: 5px; background: #ff0; border-radius: 10px; } ol li.circle{ background: #f00; } </style> </head> <body> <div> <!-- 滚动内容ul --> <ul> <li><a href="https://www.jb51.net/article/xxx" target="_blank" title="https://www.jb51.net/article/xxx"></a></li> <li><a href="https://www.jb51.net/article/xxx" target="_blank" title="https://www.jb51.net/article/xxx"></a></li> <li><a href="https://www.jb51.net/article/xxx" target="_blank" title="https://www.jb51.net/article/xxx"></a></li> <li><a href="https://www.jb51.net/article/xxx" target="_blank" title="https://www.jb51.net/article/xxx"></a></li> </ul> <!-- 焦点列表，可选 --> <ol> <li></li> <li></li> <li></li> <li></li> </ol> <!-- 上一个和下一个，可选 --> <div> <a href="javascript:void(0);"></a> <a href="javascript:void(0);"></a> </div> </div> <script type="text/javascript" src="https://www.jb51.net/common/jquery.js"></script> <script type="text/javascript" src="https://www.jb51.net/common/jquery.nfdscroll.js"></script> <script type="text/javascript"> $('.example').nfdscroll({ startIndex:0, width:'266', height:'216', interval:-1,//2000, selected:'circle', prevText:'上一个', nextText:'下一个', deriction:'left', callback: function(index,$currentNode){ console.log(index) } }); </script> </body> </html>
实现的效果
里面ol、nfdscroll-prev等的样式自己手动调整
以上这篇轮播的简单实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: