原生js實(shí)現(xiàn)簡(jiǎn)單輪播圖
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
一、寫(xiě)入網(wǎng)頁(yè)基本結(jié)構(gòu)
body:
網(wǎng)頁(yè)的最外部設(shè)置一個(gè)id為wrap的容器，取代body，這樣方便我們做一些初始化
css:
初始化：
包括外邊距margin、內(nèi)邊距padding、鏈接a、圖片img、輸入框input、列表ul、li、網(wǎng)頁(yè)html、body一系列初始化
css設(shè)置：
根據(jù)圖片數(shù)與圖片寬度設(shè)置輪播圖寬度
二、設(shè)置js邏輯
需要完成的功能有：
1、鼠標(biāo)移入輪播圖逐漸出現(xiàn)左右浮動(dòng)塊2、點(diǎn)擊浮動(dòng)塊切換圖片3、點(diǎn)擊小圓點(diǎn)切換圖片4、切換圖片同時(shí)切換小圓點(diǎn)5、自動(dòng)播放6、鼠標(biāo)移入輪播圖自動(dòng)播放停止、移出恢復(fù)自動(dòng)播放
代碼如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style type='text/css'> *{ margin: 0; padding: 0; } a{ text-decoration: none; } ul,li{ list-style: none; } img{ display: block; } input{ outline: none; } html,body{ height: 100%; overflow: hidden; } .content{ position: absolute; top: 0; left: 0; } .banner{ width: 600px; height: 400px; position: relative; margin: 50px auto; overflow: hidden; } .banner .bannerList{ position: absolute; left:-600px; top: 0; width: 4800px; height: 100%; } .banner .bannerList li{ float: left; width: 600px; height: 400px; } .banner .bannerList li img{ height: 100%; width: 100%; } .banner .left,.banner .right{ position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 50px; border: solid 2px gray; font-size:30px; text-align: center; line-height: 50px; color: rgb(255, 255, 255); opacity: 0; transition: 1000ms; } .banner .left{ left: 0px; } .banner .right{ right: 0px; } .banner .point{ position: absolute; bottom: 30px; left:50%; transform: translateX(-50%); } .banner .point li{ float: left; width: 15px; height: 15px; border-radius: 50%; background-color: gray; margin: 5px; } </style> <script type='text/javascript'> window.onload=function(){ var bannerLeft=document.querySelector(’.banner .left’); var bannerRight=document.querySelector(’.banner .right’); var banner=document.querySelector(’.banner’) var bannerList=document.querySelector(’.banner .bannerList’) var liList=document.querySelectorAll(’.banner .bannerList li’) var pointList=document.querySelectorAll(’.banner .point li’) var start=-600; timer2=setInterval(function(){ //設(shè)置定時(shí)器，自動(dòng)播放 var a=30; var index=bannerList.offsetLeft/-600+1; if(bannerList.offsetLeft==-4200){ bannerList.style.left=-600+’px’ //無(wú)縫操作 index=2; } if(bannerList.offsetLeft==-3600){ index=1; } for(var i=0;i<pointList.length;i++){ pointList[i].style.backgroundColor=’grey’ } pointList[index-1].style.backgroundColor=’red’; timer3=setInterval(function(){ a=a-1 bannerList.style.left=bannerList.offsetLeft-20+’px’;if(a==0){ clearInterval(timer3) } }, 30) if(bannerList.offsetLeft==-4200){ bannerList.style.left=-600+’px’; } },4000) // 創(chuàng)建一個(gè)移入出現(xiàn)函數(shù) banner.addEventListener(’mouseover’,occur) function occur(){ bannerLeft.style.opacity=1; //移入逐漸出現(xiàn) bannerRight.style.opacity=1; clearInterval(timer2); //移入取消自動(dòng)播放 } banner.addEventListener(’mouseout’,function(){ bannerLeft.style.opacity=0; bannerRight.style.opacity=0; //移出消失 timer2=setInterval(function(){ //移出恢復(fù)自動(dòng)播放 var a=30; timer3=setInterval(function(){ a=a-1 bannerList.style.left=bannerList.offsetLeft-20+’px’;if(a==0){ clearInterval(timer3) } }, 30) if(bannerList.offsetLeft==-4200){ bannerList.style.left=-600+’px’; } },4000) }) //設(shè)置左右浮動(dòng)塊點(diǎn)擊變色以及滾動(dòng) function colorChange(){ this.style.color=’black’; if(this.className==’right’){ //判斷是哪邊被點(diǎn)擊 var index=bannerList.offsetLeft/-600+1; var a=30; timer=setInterval(function(){ //點(diǎn)擊浮動(dòng)塊切換圖片 a=a-1; bannerList.style.left=bannerList.offsetLeft-20+’px’; if(a!=0){ bannerRight.removeEventListener(’mousedown’,colorChange) bannerLeft.removeEventListener(’mousedown’,colorChange) } if(a==0){ clearInterval(timer); bannerRight.addEventListener(’mousedown’,colorChange) bannerLeft.addEventListener(’mousedown’,colorChange) } },30) if(bannerList.offsetLeft==-4200){ bannerList.style.left=-600+’px’ index=2; } if(bannerList.offsetLeft==-3600){ index=1; } for(var i=0;i<pointList.length;i++){ pointList[i].style.backgroundColor=’grey’ } pointList[index-1].style.backgroundColor=’red’; } else{ var a=30; var index=bannerList.offsetLeft/-600-1; timer=setInterval(function(){ a=a-1; bannerList.style.left=bannerList.offsetLeft+20+’px’; if(a!=0){ bannerLeft.removeEventListener(’mousedown’,colorChange) bannerRight.removeEventListener(’mousedown’,colorChange) } if(a==0){ clearInterval(timer); bannerLeft.addEventListener(’mousedown’,colorChange) bannerRight.addEventListener(’mousedown’,colorChange) } },30) if(bannerList.offsetLeft==0){ bannerList.style.left=-3600+’px’ index=5; } if(bannerList.offsetLeft==-600){ index=6; } for(var i=0;i<pointList.length;i++){ pointList[i].style.backgroundColor=’grey’ } pointList[index-1].style.backgroundColor=’red’; } } function colorReturn(){ this.style.color=’white’ } bannerLeft.addEventListener(’mousedown’,colorChange) bannerRight.addEventListener(’mousedown’,colorChange) bannerLeft.addEventListener(’mouseup’,colorReturn) bannerRight.addEventListener(’mouseup’,colorReturn) for(var i=0;i<pointList.length;i++){ pointList[i].onmousedown=function(){ for(var i=0;i<pointList.length;i++){ pointList[i].style.backgroundColor=’gray’ } this.style.backgroundColor=’red’; for(var b=0;b<pointList.length;b++){ if(pointList[b].style.backgroundColor==this.style.backgroundColor){ var a=30; var step=-(b+1)*600-bannerList.offsetLeft; timer1=setInterval(function(){ a=a-1; bannerList.style.left=bannerList.offsetLeft+step/30+’px’; if(a!=0){ bannerLeft.removeEventListener(’mousedown’,colorChange) bannerRight.removeEventListener(’mousedown’,colorChange) } if(a==0){ clearInterval(timer1) bannerLeft.addEventListener(’mousedown’,colorChange) bannerRight.addEventListener(’mousedown’,colorChange) } },20) } } } } } </script></head><body> <div id='wrap'> <!-- 寫(xiě)出輪播圖框架 --> <div class='banner'> <ul class='bannerList'> <li> <img src='http://www.gepszalag.com/bcjs/img/james6.jpeg'> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/james1.jpg'> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/james2.jpg'> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/james3.jpg'> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/james4.jpg'> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/james5.jpeg'> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/james6.jpeg'> </li> <li> <img src='http://www.gepszalag.com/bcjs/img/james1.jpg'> </li> </ul> <!-- 左右兩個(gè)箭頭 --> <span class='left'> < </span> <span class='right'> > </span> <!-- 添加小圓點(diǎn) --> <ul class='point'> <li style='background-color: red;'></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body></html>
其中，將圖片替換為其他圖片可以實(shí)現(xiàn)不同的輪播圖，值得一提的是，六張圖片的輪播圖需要放八張圖，第八張與第二張一致，第一張與第七張一致，真正呈現(xiàn)出來(lái)的僅僅是第二張到第七張
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. jsp實(shí)現(xiàn)登錄界面2. 如何在jsp界面中插入圖片3. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)車輛管理系統(tǒng)4. 怎樣才能用js生成xmldom對(duì)象，并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島？5. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算6. ASP.Net MVC利用NPOI導(dǎo)入導(dǎo)出Excel的示例代碼7. jstl 字符串處理函數(shù)8. 不可變數(shù)據(jù)方案之immer.js原理解析9. css3溢出隱藏的方法10. 面向小白visual studio 2019 添加第三方庫(kù)教程(入門(mén))
網(wǎng)公網(wǎng)安備