<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实现滚动轮播的效果</title> <style type="text/css"> .nav { width: 1100px; height: 160px; /*border: 1px solid red;*/ margin-left: 140px; position: relative; cursor: pointer; margin-top: 15px; overflow: hidden; border: 1px solid red } .nav #nav-all { width: auto; height: 160px; position: absolute; left: -30px; } .nav .nav-i { width: 194px; height: 158px; background: #fff; border: 1px solid #d8d8d8; float: left; margin-left: 30px; } .nav .nav-img { text-align: center; padding-top: 50px; } .nav .nav-name { width: 192px; height: 30px; background: #f2f2f2; margin-top: 33px; line-height: 30px; } .nav .nav-name a { font-size: 16px; font-family: '微软雅黑'; padding-left: 10px; cursor: pointer; } .nav .nav-name a:hover { color: #4a7abe; } #last { position: absolute; left: 0; top: 50px; } #next { position: absolute; right: 0; top: 50px; } .last-next { /*display: none;*/ cursor: pointer; } </style> </head> <body> <div> <div> <div> <div> <img src="https://www.jb51.net/img/icon1.png" /> </div> <div><a>BI系统1</a> </div> </div> <div> <div> <img src="https://www.jb51.net/img/icon1.png" /> </div> <div><a>BI系统2</a> </div> </div> <div> <div> <img src="https://www.jb51.net/img/icon1.png" /> </div> <div><a>BI系统3</a> </div> </div> <div> <div> <img src="https://www.jb51.net/img/icon1.png" /> </div> <div><a>BI系统4</a> </div> </div> <div> <div> <img src="https://www.jb51.net/img/icon1.png" /> </div> <div><a>BI系统5</a> </div> </div> <div> <div> <img src="https://www.jb51.net/img/icon1.png" /> </div> <div><a>BI系统6</a> </div> </div> <div> <div> <img src="https://www.jb51.net/img/icon1.png" /> </div> <div><a>BI系统7</a> </div> </div> </div> <a> <img src="https://www.jb51.net/img/last.png" /> </a> <a> <img src="https://www.jb51.net/img/next.png" /> </a> </div> <script src="https://www.jb51.net/play.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var scrollPic_02 = new ScrollPic(); scrollPic_02.scrollContId = "nav-all";//存放所有轮播元素的div scrollPic_02.arrLeftId = "last"; //左箭头ID scrollPic_02.arrRightId = "next"; //右箭头ID scrollPic_02.frameWidth = 1102; //显示框宽 sfdasdfakfl;jlkajka;d度 scrollPic_02.pageWidth = 226; //翻页宽度 scrollPic_02.speed = 10; //移动速度(毫秒，越小越快) scrollPic_02.space = 20; //每次移动像素(单位px，越大越快) scrollPic_02.autoPlay = true; //自动播放:true|false scrollPic_02.autoPlayTime = 2; //自动播放间隔时间(秒) scrollPic_02.initialize(); //初始化 //--><!]]> </script> </body> </html>
其中：样式自己调试，最主要的是最下面的script，设置好这些就能达到效果了。
下次要写的轮播的话，只要改变样式就可以了，对于script中的一些数据进行改变就可以了。