第一步需要下载 两个js 文件
http://www.dowebok.com/demo/222/js/jquery.easyfader.min.js 下载 jquery.easyfader.min.js
http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js
中间还有两个左右箭头 请记得一起下载
图片下载方法：打开谷歌调试工具，F12。找到图片右键 看到 open in new tab 点击打开另存为即可。
效果图：
轮播图源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.easyfader.min.js"></script> <style> * { margin: 0; padding: 0 } ul, li { list-style: none; } /*lbox*/ .lbox { width: 75%; margin: 0 auto ; overflow: hidden ;} /*banner*/ .banner { width: 100%; overflow: hidden; } .fader { position: relative; width: 100%; height: 450px; /*padding-top: 50%;*/ font-family: "futura", arial; overflow: hidden; } .fader .slide { position: absolute; width: 100%; top: 0; z-index: 1; opacity: 0; } .fader .slide img { width: 100%; height: 450px; margin: auto; } .fader .prev, .fader .next { position: absolute; height: 32px; line-height: 32px; width: 40px; top: 50%; left: 50px; z-index: 4; margin-top: -25px; cursor: pointer; opacity: 0; transition: all 150ms; } .fader .prev { background: url(image/left.png) no-repeat } .fader .next { left: auto; right: 50px; background: url(image/right.png) no-repeat } .fader .pager_list { position: absolute; width: 100%; height: 26px; padding: 0; line-height: 40px; bottom: 0; text-align: center; z-index: 4; } .fader .pager_list li { border-radius: 10px; display: inline-block; width: 10px; height: 10px; margin: 0 7px; background: #fff; opacity: .9; text-indent: -9999px; cursor: pointer; transition: all 150ms; } .fader .pager_list li:hover, .fader .pager_list li.active { opacity: 1; background: #12b7de; } .banner:hover .fader_controls .page.prev { opacity: .7; left: 20px } .banner:hover .fader_controls .page.next { opacity: .7; right: 20px } </style> </head> <body> <div class="lbox"> <div class="banner"> <div id="banner" class="fader"> <li class="slide" style=" z-index: 3; opacity: 1;"><a target="_blank"><img src="image/1.jpg"></a></li> <li class="slide" style=""><a target="_blank"><img src="image/2.jpg"></a></li> <li class="slide" style=""><a target="_blank"><img src="image/3.jpg"></a></li> <li class="slide" style=" "><a target="_blank"><img src="image/4.jpg"></a></li> <li class="slide" style=" "><a target="_blank"><img src="image/5.jpg"></a></li> <li class="slide" style=" "><a target="_blank"><img src="image/6.jpg"></a></li> <div class="fader_controls"> <div class="page prev" data-target="prev"></div> <div class="page next" data-target="next"></div> <ul class="pager_list"> </ul> </div> </div> </div> </div> <script> //banner $('#banner').easyFader(); </script> </body> </html>