一、本特效主要用到的前端知識點
CSS中絕對定位（absolute）
CSS實現垂直居中
jQuery中簡單的淡入淡出動畫效果（fadeIn，fadeOut）
定時器（setInterval，clearInterval）
jQuery中增刪類（addClass，removeClass）
二、特效分析
網頁開始加載的時候，圖片開始做輪播，效果為淡入淡出。當輪播到最后一個圖片，從第一個圖片開始重新做輪播。
圖片與下面的圓點相對應，鼠標移入該圓點時，對應圖片淡入，圓點增加當前樣式。
左右兩邊附有左右按鈕，點擊左按鈕，當前圖片的左邊圖片淡入，當左邊圖片至第一個時，從最后一個圖片依次向左重新淡入；點擊右按鈕，當前圖片的右邊圖片淡入，當右邊圖片至最后一個時，從第一個圖片依次向右重新淡入。
（一）HTML
<div class="container">
<div class="box">
<img src="https://img-blog.csdn.net/20170908172159479">
<img src="https://img-blog.csdn.net/20170908172353986">
<img src="https://img-blog.csdn.net/20170908172424315">
<img src="https://img-blog.csdn.net/20170908172444061">
<img src="https://img-blog.csdn.net/20170908172525692">
<img src="https://img-blog.csdn.net/20170908172549035">
</div>
<div class="circle">
<b class="current"></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
</div>
<div class="btn left"> < </div>
<div class="btn right"> > </div>
</div>
html樣式沒有什么難點，都是最基本的樣式。
（二）CSS樣式
.container { position: absolute; top: 100px; left: 100px; width: 600px; height: 270px; } /*使用絕對定位，使全部圖片疊加到一塊*/ .box, .box img { position: absolute; top: 0; left: 0; } /*下面小圓點，使用絕對定位，位於圖片的正下方*/ .circle { width: 200px; height: 14px; position: absolute; bottom: 15px; left: 50%; margin-left: -100px; text-align: center; cursor: pointer; } /*每個小圓點的樣式*/ .circle b { display: inline-block; width: 14px; height: 14px; background-color: #000; border-radius: 50%; margin: 3px; } /*小圓點的當前樣式，也是鼠標移上去的樣式*/ .circle .current { background-color: #fff; } /*左右兩側的按鈕，采用絕對定位*/ .btn { position: absolute; top: 50%; width: 40px; height: 50px; margin-top: -25px; background-color: rgba(255, 255, 255, .7); text-align: center; line-height: 50px; font-size: 50px; cursor: pointer; } .left { left: 0; } .right { right: 0; }
CSS樣式里面需要的注意的是垂直居中的兩種方法：
a、使用絕對定位
top: 50%;然后再設置margin-top的值為要居中元素的高的-(1/2)，也就是再向上移動該元素的高的1/2距離；這個方法對於水平居中也是有效的，left: 50%;然后再設置margin-left的值為要居中元素的寬的-(1/2);
top: 50%;然后再設置margin-top的值為要居中元素的高的-(1/2)，也就是再向上移動該元素的高的1/2距離；這個方法對於水平居中也是有效的，left: 50%;然后再設置margin-left的值為要居中元素的寬的-(1/2);
b、使用line-height屬性，使line-height屬性值和該元素的height屬性值相同。
（三） jQuery動態效果
（三） jQuery動態效果
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script> <script type="text/javascript"> /*i表示當前圖片的下標和當前圓點的下標（圖片和圓點是對應關系）*/ var i = 0; var timer; $(function(){ /*Step 1： 設置頁面剛加載出來顯示的是第一張圖片*/ $("img").eq(0).show().siblings().hide(); /*開始做圖片輪播，使用定時器*/ start(); /*Step 2： 鼠標移入小圓點的時候，首先清除定時器，找到當前圓點的索引，改變當前顯示的圖片，使其變換成圓點對應的圖片，當前圓點變換樣式*/ $("b").hover(function(){ clearInterval(timer); i = $(this).index(); change(); }, function(){ /*鼠標移出的時候，重新啟動定時器*/ start(); }); /*Step 3： 點擊左邊按鈕時候，顯示當前圖片的左邊的第一個圖片，再點擊，依次向左，圖片變換，圓點樣式變換。當停止點擊按鈕時，圖片依舊一定時間內顯示下一個圖片（右邊的第一個）*/ $(".left").click(function(){ i--; /*當圖片已經是第一個，再點擊的時候，顯示最后一張圖片*/ if(i == -1){ i = 5; } change(); }); /*Step 4： 點擊右邊按鈕時候，顯示當前圖片的右邊的第一個圖片，原理同左邊圖片效果*/ $(".right").click(function(){ i++; /*當圖片已經是最后一個，再點擊的時候，顯示第一張圖片*/ if(i == 6){ i = 0; } change(); }); }); /*開始輪播函數*/ function start(){ /*定時器，每個圖片在頁面上停留的時間是3s*/ timer = setInterval(function(){ i++; if(i == 6){ i = 0; } change(); }, 3000); } /*當前圖片及對應圓點變換函數*/ function change(){ /*當前圖片淡入，其他圖片淡出*/ $("img").eq(i).fadeIn(300).siblings().stop(true, true).fadeOut(300); /*當前圓點添加類current，其他圓點刪除其類current*/ $("b").eq(i).addClass("current").siblings().removeClass("current"); } </script>
這個方法做輪播對我來說是比較簡單的，思維邏輯清晰，代碼也簡單。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>輪播圖制作</title> <style> .container { position: absolute; top: 100px; left: 100px; width: 600px; height: 270px; } .box, .box img { position: absolute; top: 0; left: 0; } .circle { width: 200px; height: 14px; position: absolute; bottom: 15px; left: 50%; margin-left: -100px; text-align: center; cursor: pointer; } .circle b { display: inline-block; width: 14px; height: 14px; background-color: #000; border-radius: 50%; margin: 3px; } .circle .current { background-color: #fff; } .btn { position: absolute; top: 50%; width: 40px; height: 50px; margin-top: -25px; background-color: rgba(255, 255, 255, .7); text-align: center; line-height: 40px; font-size: 50px; cursor: pointer; } .left { left: 0; } .right { right: 0; } </style> </head> <body> <div class="container"> <div class="box"> <img src="https://img-blog.csdn.net/20170908172159479"> <img src="https://img-blog.csdn.net/20170908172353986"> <img src="https://img-blog.csdn.net/20170908172424315"> <img src="https://img-blog.csdn.net/20170908172444061"> <img src="https://img-blog.csdn.net/20170908172525692"> <img src="https://img-blog.csdn.net/20170908172549035"> </div> <div class="circle"> <b class="current"></b> <b></b> <b></b> <b></b> <b></b> <b></b> </div> <div class="btn left"> < </div> <div class="btn right"> > </div> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script> <script type="text/javascript"> var i = 0; var timer; $(function(){ $("img").eq(0).show().siblings().hide(); start(); $("b").hover(function(){ clearInterval(timer); i = $(this).index(); change(); }, function(){ start(); }); $(".left").click(function(){ i--; if(i == -1){ i = 5; } change(); }); $(".right").click(function(){ i++; if(i == 6){ i = 0; } change(); }); }); function start(){ timer = setInterval(function(){ i++; if(i == 6){ i = 0; } change(); }, 3000); } function change(){ $("img").eq(i).fadeIn(300).siblings().stop(true, true).fadeOut(300); $("b").eq(i).addClass("current").siblings().removeClass("current"); } </script> </body> </html>