在上一篇的基礎上,增加了左右箭頭的響應事件,實現(xiàn)了點擊左右箭頭也可以讓圖片滾動:
網(wǎng)站建設哪家好,找創(chuàng)新互聯(lián)!專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、成都微信小程序、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(liá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'; } //讓選中的索引的圖片顯示,對應的圓圈高亮 imgs[i].style.display = 'block'; lis[i].style.fontSize = '26px'; lis[i].style.color = '#fff'; } //當鼠標移近圖片區(qū)域內(nèi),自動播放停止 lunbo.addEventListener("mouseover",function(){ clearInterval(pic_time); },false); //當鼠標移出圖片區(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),后期需要做的事:是對代碼要進行精簡,封裝,提高運行效率。
創(chuàng)新互聯(lián)www.cdcxhl.cn,專業(yè)提供香港、美國云服務器,動態(tài)BGP最優(yōu)骨干路由自動選擇,持續(xù)穩(wěn)定高效的網(wǎng)絡助力業(yè)務部署。公司持有工信部辦法的idc、isp許可證, 機房獨有T級流量清洗系統(tǒng)配攻擊溯源,準確進行流量調(diào)度,確保服務器高可用性。佳節(jié)活動現(xiàn)已開啟,新人活動云服務器買多久送多久。
本文題目:js實現(xiàn)輪播圖(二)-創(chuàng)新互聯(lián)
URL分享:http://bm7419.com/article28/diojcp.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供靜態(tài)網(wǎng)站、營銷型網(wǎng)站建設、服務器托管、移動網(wǎng)站建設、外貿(mào)建站、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容