HTML：
解析：
一.樣式要點
（1）父元素需要加上overflow:hidden;這樣超出圖片才能不顯現
（2）父元素需要加上position:relative;圖片列表加上position:absolute;讓圖片列表的定位基於父元素
（3）圖片列表的z-index:1;箭頭和按鈕的z-index:2;這樣箭頭和按鈕就會覆蓋在圖片列表上面
（4）箭頭初始是不顯示的，鼠標移進去，箭頭才顯示
`
/* 默認隱藏箭頭 /
.arrow {display: none;}
/ 鼠標移入輪播組件時，顯示箭頭 */
container:hover .arrow { display: block;}
（5）鼠標移到箭頭上透明度發生變化
.arrow { cursor: pointer; background-color: RGBA(0,0,0,.3); color: #fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}`
二．js分析
原理：
父元素設置overflow：hidden；讓他超出部分隱藏，再通過設置圖片列表的left值來顯示對應位置的圖片
無限滾動的技巧：滾動到最后1張圖時，向后滾動，立馬把圖片列表拉回第一張圖的位置，在第一張圖往前滾，立馬把圖片列表拉回最后一張圖的位置
1．封裝函數
這樣的話，
document.getElementById('container');
就可以寫成$('container');
2.動態生成按鈕圓點
3.左右箭頭切換
思路：
1）向左，向右切換，每次的差值是一個圖片的寬度，傳參數為正負一個圖片的寬度
功能相似，可以封裝成一個函數
2.）問題是我們怎么才能判斷我們當前的圖片是第幾張呢，我們可以設定指針為當前圖片current=1,左擊當current=1時current=slideNum;否則current-1; 右擊當current=slideNum時current=1;
3.無限滾動效果
原理：每次點擊都要做個判斷，把它拉到正確位置。
切換圖片函數
思路：1.圖片切換，比如從第一張切換到第二張，要把left值變為-初始left值一張圖片的寬度，
思路：2.圖片切換方向分為向左和向右，方向不同符號相反,向右的話為負，向左的話為正;這樣可以傳入一個參數值
思路：3.向左，向右切換，每次的差值是一個圖片的寬度，傳參數為正負一個圖片的寬度
思路：4.設定圖片的列表的初始left值為0，而當圖片在最后一張圖片時向右切換，圖片應該切換到第一張圖片上，當圖片在第一張圖片時向左切換，圖片應該切換到最后一張圖片上，這是固定的，與傳入的參數無關，我們可以寫在圖片切換函數里，圖片切換看的是位置的變化，判斷位置臨界點0和-listimgwidth(slideNum-1)，newleft>0,處於第一張圖上，newleft<-listimgwidth(slideNum-1),處於最后一張圖上
4.按鈕高亮函數
（1） 需要提前設置按鈕第一個圓點初始高亮，當前圖片序號對應的小圓點高亮
（2） 對應的按鈕圓點高亮之前，我們需要把其他的按鈕按鈕圓點關掉
思路：通過一個for循環去查找lunbo_button下的按鈕，將他的每一個元素class為空
5.按鈕切換圖片
思路：我們之前箭頭切換圖片是一張一張的切換的，每一張圖片都比前一張圖片的偏移量加了一張圖片的寬度，
我們首先確定的是知道當前高亮的圖片的指針，點擊按鈕切換圖片時我們可以獲取按鈕的索引值，然后要計算偏移量（指針差*一張圖片）
關鍵點：（1）獲取按鈕的索引值，切換圖片之后不要忘了更新圖片的當前指針
6.自動循環播放
每個3s切換一次：
可以設置個定時器，讓它每隔3s運行下右箭頭點擊事件。
鼠標移到圖片上，圖片不再自動輪播。鼠標從圖片上移除，圖片繼續自動輪播。
寫兩個函數，運行定時器和清除定時器。
當鼠標移到圖片上，清除定時器。
定時器函數。鼠標從圖片上移除，運行定時器函數。
拓展：
問：
這兩個截圖的代碼有什么區別？
第一張圖的代碼，onmouseover跟onmouseout函數都可以執行（onmouseout函數是圖片自動輪播，onmouseover是鼠標放上去之后停止輪播。）；
第二張圖的代碼，圖片可以自動輪播，但是鼠標放上去之后，圖片沒有停止輪播。
autoplay（）跟autoplay有什么區別？
答：
1）如果直接autoplay (); 像下圖
表示的是立即執行，不管你前面的條件有沒有被觸發。
2）但是如果寫成 function () { autoplay ();}，
就表示，你前面的條件執行了， 就開始執行函數， 函數就是里面的autoplay ();
3） 只用autoplay，
類似指針，指向的是autoplay ();這個函數， 就是滿足條件下會運行函數。
關鍵點：
把函數名寫全了， 就變成了立即執行
條件式的， 前面都要加function(){你要加的函數}， 或者只寫一個函數名， 后面不要括號（前提是， 你的函數里面沒有參數）
講到這里這個基本的輪播圖就寫得差不多了，如果想效果好一點，可以在輪播圖的基礎上加些效果。比如：淡入淡出效果，滑動動畫效果，百葉窗效果，破碎玻璃等等.提示下：把這些效果做成函數，需要時直接調用函數會不會方便點…….
三.附錄
附1(js代碼）：
<script type="text/javascript">
//效果：左右圖片切換，按鈕高亮，點擊按鈕切換
window.onload = function () {
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
var container =$('container');
var list = $('list');
var listimg = $('list').getElementsByTagName('img');
var listimgwidth = listimg[0].offsetWidth;
var slideNum = listimg.length;
var prev = $('prev');
var next = $('next');
var current = 1; //當前圖片指針（從1開始）
list.style.left=0;
//js動態添加按鈕圓點
var dot=document.createElement("ul")
dot.setAttribute("id","lunbo_button");
dot.setAttribute("class","lunbo_button");
for(i=0;i<slideNum;i++){
var dotli=document.createElement("li");
//dotspan.innerText=i+1;//帶數字的按鈕
dot.appendChild(dotli);
}
container.appendChild(dot);
//圖片高亮函數
var buttons= $('lunbo_button').getElementsByTagName('li');
buttons[0].className = 'on';
//小圓點高亮函數,需要注意的是我們需要先取消所有按鈕的高亮，再讓當前圖片序號對應的小圓點高亮
function showButton() {
for (var i = 0; i < slideNum ; i++) {
buttons[i].className = '';
}
buttons[current-1].className = 'on';
}
//思路：向左，向右切換，每次的差值是一個圖片的寬度，傳參數為正負一個圖片的寬度
prev.onclick=function(){
if(current==1){//重要重要！！！！！判斷語句里的等於要寫成==
current=slideNum;
}
else{
current-=1;
}
showButton();
switchpic(+parseInt(listimgwidth));
}
//向右切換
next.onclick=function(){
if(current==slideNum){
current=1;
}
else{
current+=1;
}
showButton();
switchpic(-parseInt(listimgwidth));
}
//切換圖片函數
function switchpic(offset){
var newleft=parseInt(list.style.left)+offset;
list.style.left=newleft+"px";
if(newleft>0){
list.style.left=-listimgwidth*(slideNum-1)+"px";
}
else if(newleft<-listimgwidth*(slideNum-1)){
list.style.left=0;
}
}
//按鈕切換代碼
for(i=0;i<slideNum;i++){
buttons[i].index = i;
buttons[i].onclick=function(){
if(this.className == 'on'){//按下的按鈕高亮，代碼不繼續運行
return;
}
var j = this.index;
switchpic(-(j+1-current)*listimgwidth);
current=j+1;
showButton();//圖片切換之后調用小圓點高亮函數
}
};
//自動循環播放代碼
timer=0;
function autoplay(){
clearInterval(timer);//開定時器前先清除定時器
timer=setInterval(function(){
next.onclick();
},3000)
}
function stopplay(){
clearInterval(timer);
}
autoplay();
container.onmouseover=stopplay;
container.onmouseout=autoplay;
}
</script>
附2(同一思路的jquery代碼）：
<script type="text/javascript">
$(document).ready(function(){
var container =$(".container");
var list = $(".list");
var listimg = $(".list").find("img");
var listimgwidth = listimg.eq(0).width();//獲取輪播圖片的寬度
var slideNum = listimg.length;
var prev = $(".prev");
var next = $(".next");
var current = 1;
list.css("left",0);
//jquery動態添加按鈕圓點
var ulstart = '<ul class="lunbo_button">',
ulcontent = '',
ulend = '</ul>';
for(i=0;i<slideNum;i++){
ulcontent += '<li>' + '</li>';
//ulcontent += '<li>' + (i+1) + '</li>';//帶數字的按鈕
}
container.append(ulstart+ulcontent+ulend);
//圖片高亮函數
var buttons= $(".lunbo_button").find("li");
buttons.eq(0).attr("class", "on");
function showButton() {
buttons.eq(current-1).addClass("on")
.siblings().removeClass("on");
}
//向左
prev.on("click", function() {
if(current==1){
current=slideNum;
}
else{
current-=1;
}
showButton();
switchpic(+parseInt(listimgwidth));
});
//思路：向右切換
next.on("click", function() {
if(current==slideNum){
current=1;
}
else{
current+=1;
}
showButton();
switchpic(-parseInt(listimgwidth));
});
//切換圖片函數
function switchpic(offset){
var newleft=parseInt(list.css("left"))+offset;
list.css("left",newleft);
if(newleft>0){
list.css("left",-listimgwidth*(slideNum-1));
}
else if(newleft<-listimgwidth*(slideNum-1)){
list.css("left",0);
}
}
//按鈕切換代碼
buttons.each(function () {
$(this).on("click", function() {
var j = $(this).index();
switchpic(-(j+1-current)*listimgwidth);
current=j+1;
showButton();//圖片切換之后調用小圓點高亮函數
});
});
//自動循環播放代碼
timer=0;
function autoplay(){
clearInterval(timer);//開定時器前先清除定時器
timer=setInterval(function(){
next.trigger('click');//！！！！！注意此處寫法
},3000)
}
function stopplay(){
clearInterval(timer);
}
autoplay();
container.hover(stopplay, autoplay);
});
</script>
備注知識點：
1）獲取或設置元素的寬度
Js
某個元素的寬度： obj.offsetWidth;
某個元素的高度： obj.offsetHeight;
但是要注意的是offsetWidth;取得值是width + padding+border
Jquery
獲取或設置元素的寬度：$(obj).width();
獲取或設置元素的高度：$(obj).height();
獲取或設置元素的寬度：$(obj).innerWidth(); (width + padding)
獲取或設置元素的高度：$(obj).innerHeight(); (height + padding)
獲取或設置元素的寬度：$(obj).outerWidth(); (width + padding + border)
獲取或設置元素的高度：$(obj).outerHeight(); (height + padding + border)
獲取或設置元素的寬度：$(obj).outerWidth(true); (width + padding + border + margin)
獲取或設置元素的高度：$(obj).outerHeight(true); (height + padding + border + margin)
注意：可獲取和設置元素的寬度和高度。獲取時，返回number類型；設置時，給方法傳入數值類型的參數即可。具體用法：
$(element).width(); //獲取元素寬度
$(element).width(200); //設置元素寬度
innerWidth()、innerHight()方法：只能獲取，不能設置。
可獲取第一個匹配元素的內部寬度和高度，例如獲取元素內部寬度時，包括width+padding,不包括border。
outerWidth()、outerHight()方法：只能獲取，不能設置。
可獲取第一個匹配元素的外部寬度和高度，有兩種情況: （用獲取元素外部寬度來舉例）
1、當方法內部不指定參數或者參數為false時，包括width+padding+margin;
2、當方法內部參數為true時，包括width+padding+border+margin；
css()方法：既可獲取，也可設置。
可 以獲取和設置元素的寬高（當然也可獲取和設置其他css屬性，這里只是為了與其他幾種設置獲取元素寬高的方法做對比），當獲取元素的寬高時，返回一個單位 為px的string字符串；當設置元素寬高時，給css()方法傳入對象，對象里面包含width\height屬性；具體用法：
$(element).css('width'); //獲取元素寬度
$(element).css({width:'200px',height:'300px'});//設置元素的寬度和高度，也可以不要引號和單位
2）某個元素的上邊界到body最頂部的距離
js
某個元素的上邊界到body最頂部的距離： obj.offsetTop;(在元素的包含元素不含滾動條的情況下)
某個元素的左邊界到body最左邊的距離： obj.offsetLeft;(在元素的包含元素不含滾動條的情況下)
jquery
3）scrollLeft，scrollTop，scrollWidth ，scrollHeight
scrollLeft //元素最左端到窗口最左端的距離
scrollTop //元素最頂端到窗口最頂端的距離
scrollWidth //元素的滾動寬度
scrollHeight //元素的滾動高度
本文為原創，如需轉載請注明轉載地址，謝謝合作！
本文地址：http://www.cnblogs.com/wanghuih/p/6365085.html