一.實現原理
（1）將所有圖片放在一個父容器div里面，通過display屬性來設置圖片的出現與隱藏；
（2）輪播圖分為手動輪播和自動輪播；
手動輪播的重點是每次點擊圖片下方的小圓圈，獲得它的索引號，并讓與之對應索引號的圖片顯示，并且此時的小圓圈為高亮顯示；
自動輪播：利用定時器setInterval()，來每隔一定的時間來播放一次圖片。
（3）所有的基礎知識：dom操作，定時器，事件運用。
二.輪播圖頁面布局：
<div id="content"> <!-- 總的父容器 --><div class="carousel-inner"> <!-- 包含圖片的容器 --><div class="item "><img src="./img/lunbo1.jpg" alt="第一張圖片"></div><div class="item"><img src="./img/lunbo2.jpg" alt="第二張圖片"></div><div class="item"><img src="./img/lunbo3.jpg" alt="第三張圖片"></div></div><!-- 圖片下方的指示圓圈--><ul class="carousel-indicators"><li id='pic1'>●</li><li id='pic2'>●</li><li id='pic3'>●</li></ul><!-- 圖片左右方來回滾動圖片的左右箭頭--><a href="#" class="carousel-control prev"><span><</span></a><a href="#" class="carousel-control next"><span>></span></a></div>
三.輪播圖的css樣式：
#content{width: 100%;height:500px;position: relative;}.carousel-inner{position: relative;width: 100%;overflow: hidden; height:500px; }.carousel-inner>.item>img{display: block; line-height: 1; z-index: 1;}.carousel-indicators{position: absolute;bottom:10px;left:45%;z-index: 2;list-style-type: none;}.carousel-indicators li{display:inline-block;padding: 0 15px;font-size: 24px;color:#999; cursor: pointer;z-index: 2;}.active1{font-size: 28px;color:#fff;}.carousel-control{position: absolute;text-decoration:none;color: #999;font-weight: bold;opacity: .5;font-size: 40px;z-index: 3;}.carousel-control:hover{color:fff;text-decoration: none;opacity: .9;outline: none;font-size: 42px;}.prev{top: 30%; left:20px; }.next{top:30%;right: 20px;}四.輪播圖的js實現代碼：
window.onload = function(){//輪播初始化var lunbo = document.getElementById('content');var imgs = lunbo.getElementsByTagName('img'); var uls = lunbo.getElementsByTagName('ul');var lis = lunbo.getElementsByTagName('li');//初始狀態下，一個圓圈為高亮模式lis[0].style.fontSize = '26px';lis[0].style.color = '#fff';//定義一個全局變量，用來進行自動輪播圖片順序的變化var pic_index = 1;//自動輪播.使用pic_time記錄播放，可以隨時使用clearInterval()清除掉。var pic_time = setInterval(autobofang,3000);//手動輪播for(var i=0;i<lis.length;i++){ lis[i].addEventListener("mouseover",change,false);}function change(event){ var event=event||window.event;var target=event.target||event.srcElement; var children = target.parentNode.children; for(var i=0;i<children.length;i++){if(target == children[i]){ picChange(i); } }} //圖片切換函數function picChange(i){ //讓所有圖片都不顯示，所有圓圈都為普通樣式 for(var j=0;j<imgs.length;j++){imgs[j].style.display = 'none'; lis[j].style.fontSize = '24px';lis[j].style.color = '#999';}//讓選中的索引的圖片顯示，對應的圓圈高亮 imgs[i].style.display = 'block'; lis[i].style.fontSize = '26px';lis[i].style.color = '#fff'; }//自動播放的事件處理function autobofang(){if(pic_index >= lis.length){pic_index = 0;}change1(pic_index);pic_index++;}//自動播放的圖片轉化中的事件function change1(index){ picChange(index);//鼠標移入ul標簽，自動播放圖片暫停uls[0].addEventListener("mouseover",pause,false);//鼠標移出ul標簽，自動播放圖片繼續uls[0].addEventListener("mouseout",go,false);}//自動播放暫停函數function pause(event){var event=event||window.event;var target=event.target||event.srcElement;switch(target.id){case "pic1":clearInterval(pic_time); break;case "pic2":clearInterval(pic_time);break;case "pic3":clearInterval(pic_time);break;}}//自動播放圖片繼續函數function go(event){var event=event||window.event;var target=event.target||event.srcElement; switch(target.id){case "pic1":pic_index = 1; pic_time = setInterval(autobofang,3000);break;case "pic2":pic_index = 2; pic_time = setInterval(autobofang,3000);break;case "pic3":pic_index = 3; pic_time = setInterval(autobofang,3000); break;}}}五.效果圖：
六.遇到的問題與不足
問題：當鼠標第一次移入ul標簽時，自動輪播圖片停止，鼠標移出，自動輪播繼續，但是隨著運行，輪播圖片的變化速度越來越快，而且這時點擊ul標簽已經不起作用了。
問題原因：在后面停止輪播后再次輪播開始使用定時器的時候，沒有給賦值給pic_time來記錄，也就沒有再次鼠標移到ul標簽而清除定時器，因此導致再次點擊ul標簽不能暫停自動輪播播放，而且速度 越來越快。
不足：沒有實現類似淘寶輪播圖那樣平滑過渡的無現滾動的效果，左右箭頭的指示作用也沒有完成。這些在后期會繼續學習，繼續來完善，來分享.
新聞熱點
疑難解答
