第一步需要下載 兩個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>