今天寫了個小輪播，

頁面是屬於區域性重新整理，

首頁與重新整理頁面都需要呼叫輪播的函式，

函式沒封裝，直接二次呼叫，發現第一輪的函式並未終止~~

測試多次終止函式和刪除元素，始終不可行。

最後封裝函式，傳參解決。

以下程式碼

html:

<div class="tempWrap">
<ul class="lbt">
<li> <img src="images/1.png" > </li>
<li> <img src="images/2.png"></li>
<li> <img src="images/3.png">  </li>
</ul>
<ul class="lbt_on">
<li class="on"></li>
<li></li>
<li></li>
</ul>
</div>

css:

<style>
*{margin: 0;padding: 0;}
ul li{list-style: none;}
.tempWrap{overflow: hidden; position: relative; width: 488px;margin: 50px auto 0;}
    .lbt{position: relative; overflow: hidden; padding: 0px; margin: 0px; transition: left 0.5s;}
    .lbt li{float: left; width: 488px;}
    .lbt li img{width:488px; height:251px;}
.lbt_on{position: absolute;bottom: 10px; left: 50%; margin-left: -25px;}
.lbt_on li{float: left;  margin:  auto 0;}
.lbt_on li{width: 9px; height: 9px; border-radius: 50%; margin-left: 5px; background: blue; cursor: pointer; display: inline-block; float: none; }
    .lbt_on li.on{background: #fff;}
</style>

js:

<script>
lbtfn(
 $('.lbt'),
 $('.lbt_on'),
 $('.lbt li'),
 $('.lbt_on li'),
 parseInt($('.lbt li').css('width')),
 $('.lbt li,.lbt_on li'),
 $('.lbt li').length,
 0
);


// 輪播圖
function lbtfn(a,b,c,d,e,f,g,i){
a.css ({'width':g*e+'px','left':0});
function lbt(){
i++; if(i == g)i = 0;
a.css('left',(i*-e)+'px');
d.eq(i).addClass('on').siblings().removeClass('on');
}
f.hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function () {lbt();}, 2000);
});

d.on('click',function(){
i = $(this).index() -1; lbt();
})
timer = setInterval(function () {lbt();}, 2000);
};
</script>