在上一篇用JS實現圖片輪播效果代碼(一)的基礎上,增加了左右箭頭的響應事件,實現了點擊左右箭頭也可以讓圖片滾動:
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; //初始狀態下,一個圓圈為高亮模式 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); } } } //圖片切換函數 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'; } //讓選中的索引的圖片顯示,對應的圓圈高亮 imgs[i].style.display = 'block'; lis[i].style.fontSize = '26px'; lis[i].style.color = '#fff'; } //當鼠標移近圖片區域內,自動播放停止 lunbo.addEventListener("mouseover",function(){ clearInterval(pic_time); },false); //當鼠標移出圖片區域內,自動播放繼續 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); } }
效果圖:鼠標劃過箭頭的效果圖
當鼠標點擊到箭頭,圖片會跟著變化,下面的小圓圈也會跟著顯示對應圖片的高亮效果
總結:
基本輪播效果已經實現,後期需要做的事:是對代碼要進行精簡,封裝,提高運行效率。