輪播原生js封裝
總共四個部分
標題
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.list img{
width:100%;
vertical-align:top;
}
.box{
width:800px;
height:450px;
margin:50px auto;
overflow:hidden;
position:relative;
}
.list{
width:800%;
height:450px;
position:absolute;
left:0;
top:0;
transition:all.5s;
}
.list li{
float:left;
width:800px;
height:450px;
}
.box span{
display:inline-block;
width:40px;
height:80px;
position:absolute;
top:50%;
margin-top: -40px;
background-color:rgba(51,51,51,0.5);
cursor:pointer;
}
.back{
left:0;
}
.next{
right:0;
}
.point{
position:absolute;
bottom:20px;
right:100px;
}
.point li{
float:left;
width:20px;
height:20px;
border-radius:50%;
cursor:pointer;
background-color:#000;
margin-left:20px;
}
.point.active{
background-color:#01ffff;
}
var_box=document.getElementById('box');//最大容器
var_list=document.getElementById('list');//? ul
var_li=_list.getElementsByTagName('li');//li
var_back=document.getElementById('back');//上一頁
var_next=document.getElementById('next');//下一頁
var_point=document.getElementById('point');//小圓點的ul
var_ali=_point.getElementsByTagName('li');//小圓點
variNow=0;
vartimer=null;
// 第一部分：
// 獲取變量暫時不提亭引，接下來的輪播第一步：先自己封裝一個函數瞒爬，如下：
functionmove(){
// 自己封裝的函數內執(zhí)行一個for循環(huán)，該循環(huán)是動態(tài)給 圓點（li）通過動態(tài)添加class名
// 然后在css樣式中寫li的背景顏色樣式改變它的背景顏色奕短。
for(vari=0;i<_ali.length;i++){
// 讓圓點（li）的class名為空。
_ali[i].className='';
}
// 讓當前的li圓點添加class名稱
_ali[iNow].className='active';
// 讓整個ul向左慢慢移動返劲，移動的距離就是當前l(fā)i的寬度這個寬度是慢慢增加的唉窃。
_list.style.left=-_li[0].offsetWidth*iNow+'px';
}
// 第二部分：主要是點擊事件。
// 給我們的左右點擊按鈕添加點擊事件 通過我們的點擊按鈕的點擊事件改變兩件事摩瞎，一：就是讓我們的輪播圖片執(zhí)行拴签，也就是執(zhí)行我們封裝好的函數
// 二：讓我們的小圓點相對應的執(zhí)行。
_next.onclick=function(){
iNow++;
if(iNow>=_li.length){
iNow=0;
}
move()
}
_back.onclick=function(){
iNow--;
if(iNow<=-1){
iNow=_li.length-1;
}
move()
}
// 接下來就是讓輪播中的小點 點擊讓相應的圖片進行變換
for(vari=0;i<_ali.length;i++){
// 先動態(tài)獲取我們的小點歲所對應的li,
_ali[i].index=i;
//給我們的小點添加點擊事件
//點擊圓圈讓我們的輪播執(zhí)行旗们。
_ali[i].onclick=function(){
//讓我們的變量iNow變成當前的小圓點蚓哩。
iNow=this.index;
//執(zhí)行我們之前封裝好的move函數
move()
}
}
move();
// 接下來就是第三部分：清除定時器：clearInterval（timer）
clearInterval(timer)
// setInterval 無限執(zhí)行；在我們清除定時器的時候上渴，想讓定時器無限執(zhí)行岸梨，執(zhí)行到達一定地步的時候再清除喜颁。也就是說讓我們inow一直執(zhí)行 當其小于li標簽的個數（長度）的時候再歸0.當然這個過程就是我們輪播圖片切換的過程。執(zhí)行時間是2秒盛嘿。
timer=setInterval(function(){
iNow++;
if(iNow>=_li.length){
iNow=0;
}
move()
},2000)
// 第四部分：鼠標移入移除效果：而鼠標移入移除的范圍就是在我們設定的div塊元素中洛巢。
// 鼠標移入的時候清除定時器。
_box.onmouseover=function(){
clearInterval(timer);
}
// 鼠標移除的時候開始執(zhí)行定時器功能次兆。
_box.onmouseout=function(){
clearInterval(timer);
timer=setInterval(function(){
iNow++;
if(iNow>=_li.length){
iNow=0;
}
move()
},2000)
}
