1.首先看一下目录结构
images文件夹放所需要播放的图片。
js文件夹放jquery库和main.js
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>JQuery slideShow</title> 6 <style> 7 *{margin: 0;padding: 0} 8 ul,ol{list-style: none;} 9 .slideShow{position: relative;margin: 100px auto;height: 140px;width: 340px;overflow: hidden;} 10 .slideShow ul{ position: relative;width: 2000px; } 11 .slideShow ul li{float: left;width: 340px} 12 .slideShow .nav{text-align: center;position: absolute;right: 10px;bottom: 10px;font-size: 12px;line-height: 18px;} 13 .slideShow .nav span{ -webkit-user-select:none;user-select:none;float: left;cursor: pointer;border-radius: 9px;display: inline-block;width: 18px;height: 18px;background:rgba(0,0,0,0.7);margin-left: 2px;color: #fff;opacity: 0.5;} 14 .slideShow .nav span.active{opacity: 1;} 15 </style> 16 </head> 17 <body> 18 <div class="slideShow"> 19 <ul> 20 <li><a href="#"><img src="./images/01.jpg" alt=""></a></li> 21 <li><a href="#"><img src="./images/02.jpg" alt=""></a></li> 22 <li><a href="#"><img src="./images/03.jpg" alt=""></a></li> 23 <li><a href="#"><img src="./images/04.jpg" alt=""></a></li> 24 <li><a href="#"><img src="./images/05.jpg" alt=""></a></li> 25 </ul> 26 <div class="nav"> 27 <span class="active">1</span> 28 <span>2</span> 29 <span>3</span> 30 <span>4</span> 31 <span>5</span> 32 </div> 33 <script src="js/jquery-3.1.1.min.js"></script> 34 <script src="js/main.js"></script> 35 </body> 36 </html>