<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片轮播插件</title> <style> *{ margin: 0; padding: 0; } .slider1{ width: 800px; height: 200px; overflow: hidden; position: relative; } .slider2{ width: 800px; height: 200px; margin-top: 50px; overflow: hidden; position: relative; } .slider3{ width: 800px; margin-top: 50px; height: 200px; overflow: hidden; position: relative; } ul{ position: absolute; left: 0; top: 0; list-style-type: none; } ul li{ float: left; } #num{ position: absolute; right:20px; bottom:20px; } #num span{ display: block; float:left; width:30px; height: 30px; line-height: 30px; text-align: center; margin-right:10px; background: #ccc; opacity: 0.8; color:#fff; } #num span.active{ opacity: 1; background: #1D5D76; } .left{ width: 56px; height: 87px; position: absolute; left:10px; top:57px; background: url(lunboimg/left-arrow.png); } .right{ width: 56px; height: 87px; position: absolute; right:10px; top:57px; z-index: 100; background: url(lunboimg/right-arrow.png); } </style> </head> <body> <div class="slider1"> <ul> <li><img src="lunboimg/1(1).jpg" /></li> <li><img src="lunboimg/2.jpg" /></li> <li><img src="lunboimg/3.jpg" /></li> <li><img src="lunboimg/4.jpg" /></li> </ul> </div> <div class="slider2"> <ul> <li><img src="lunboimg/1(1).jpg" /></li> <li><img src="lunboimg/2.jpg" /></li> <li><img src="lunboimg/3.jpg" /></li> <li><img src="lunboimg/4.jpg" /></li> </ul> </div> <div class="slider3"> <ul> <li><img src="lunboimg/1(1).jpg" /></li> <li><img src="lunboimg/2.jpg" /></li> <li><img src="lunboimg/3.jpg" /></li> <li><img src="lunboimg/4.jpg" /></li> </ul> </div> </body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script src="js/jquery.slider.js"></script> <script> $('.slider1').slider(); $('.slider2').slider({ numControl:true, speed:500 }); $('.slider3').slider({ arrowControl:true }); </script> </html>
