用JS實現(xiàn)輪播圖效果(二)

    這篇文章主要介紹了用JS實現(xiàn)輪播圖效果（二）的相關(guān)資料,需要的朋友可以參考下
    js代碼如下：
    window.onload = function(){
    //輪播初始化
    var lunbo = document.getElementById('content');
    var imgs = lunbo.getElementsByTagName('img');
    var uls = lunbo.getElementsByTagName('ul');
    var lis = lunbo.getElementsByTagName('li');
    var next = document.getElementById('next');
    var prev = document.getElementById('prev');
    var item = 0;
    //初始狀態(tài)下，一個圓圈為高亮模式
    lis[0].style.fontSize = '26px';
    lis[0].style.color = '#fff';
    imgs[0].style.display = 'block';
    //定義一個全局變量，用來進行自動輪播圖片順序的變化
    var pic_index = 1;
    //自動輪播.使用pic_time記錄播放，可以隨時使用clearInterval()清除掉。
    var pic_time = setInterval(autobofang,1000);
    //自動播放的事件處理
    function autobofang(){
    if(pic_index >= lis.length){
    pic_index = 0;
    }
    picChange(pic_index);
    pic_index++;
    }
    //手動輪播
    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);
    }
    }
    }
    //圖片切換函數(shù)
    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';
    }
    //讓選中的索引的圖片顯示，對應(yīng)的圓圈高亮
    imgs[i].style.display = 'block';
    lis[i].style.fontSize = '26px';
    lis[i].style.color = '#fff';
    }
    //當(dāng)鼠標移近圖片區(qū)域內(nèi)，自動播放停止
    lunbo.addEventListener("mouseover",function(){
    clearInterval(pic_time);
    },false);
    //當(dāng)鼠標移出圖片區(qū)域內(nèi)，自動播放繼續(xù)
    lunbo.addEventListener("mouseout",function(){pic_time = setInterval(autobofang,1000); },false);
    //后退箭頭點擊事件，圖片會跟著點擊事件不斷變化
    next.addEventListener("click",movenext,false);
    function movenext(){
    if(item == 2){
    item=0;
    }
    else{
    item+=1;
    }
    picChange(item);
    }
    prev.addEventListener("click",moveprev,false);
    function moveprev(){
    if(item == 0){
    item=2;
    }
    else{
    item-=1;
    }
    picChange(item);
    }
    }
    總結(jié)：
    基本輪播效果已經(jīng)實現(xiàn)，后期需要做的事：是對代碼要進行精簡，封裝，提高運行效率。