封装函数轮播图多页面使用

今天写了个小轮播，

页面是属于局部刷新，

首页与刷新页面都需要调用轮播的函数，

函数没封装，直接二次调用，发现第一轮的函数并未终止~~

测试多次终止函数和删除元素，始终不可行。

最后封装函数，传参解决。

以下代码

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>