文章詳情頁

原生js實現(xiàn)簡單輪播圖

瀏覽：183日期：2024-04-14 17:01:39

本文實例為大家分享了js實現(xiàn)簡單輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

一、寫入網(wǎng)頁基本結(jié)構(gòu)

body:

網(wǎng)頁的最外部設置一個id為wrap的容器，取代body，這樣方便我們做一些初始化

css:

初始化：

包括外邊距margin、內(nèi)邊距padding、鏈接a、圖片img、輸入框input、列表ul、li、網(wǎng)頁html、body一系列初始化

css設置：

根據(jù)圖片數(shù)與圖片寬度設置輪播圖寬度

二、設置js邏輯

需要完成的功能有：

1、鼠標移入輪播圖逐漸出現(xiàn)左右浮動塊2、點擊浮動塊切換圖片3、點擊小圓點切換圖片4、切換圖片同時切換小圓點5、自動播放6、鼠標移入輪播圖自動播放停止、移出恢復自動播放

代碼如下：

<!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(){ //設置定時器，自動播放 var a=30; var index=bannerList.offsetLeft/-600+1; 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’; 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)建一個移入出現(xiàn)函數(shù) banner.addEventListener(’mouseover’,occur) function occur(){ bannerLeft.style.opacity=1; //移入逐漸出現(xiàn) bannerRight.style.opacity=1; clearInterval(timer2); //移入取消自動播放 } banner.addEventListener(’mouseout’,function(){ bannerLeft.style.opacity=0; bannerRight.style.opacity=0; //移出消失 timer2=setInterval(function(){ //移出恢復自動播放 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) }) //設置左右浮動塊點擊變色以及滾動 function colorChange(){ this.style.color=’black’; if(this.className==’right’){ //判斷是哪邊被點擊 var index=bannerList.offsetLeft/-600+1; var a=30; timer=setInterval(function(){ //點擊浮動塊切換圖片 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'>  <div class='banner'> <ul class='bannerList'> <li> <img src='http://m.b3g6.com/bcjs/img/james6.jpeg'> </li> <li> <img src='http://m.b3g6.com/bcjs/img/james1.jpg'> </li> <li> <img src='http://m.b3g6.com/bcjs/img/james2.jpg'> </li> <li> <img src='http://m.b3g6.com/bcjs/img/james3.jpg'> </li> <li> <img src='http://m.b3g6.com/bcjs/img/james4.jpg'> </li> <li> <img src='http://m.b3g6.com/bcjs/img/james5.jpeg'> </li> <li> <img src='http://m.b3g6.com/bcjs/img/james6.jpeg'> </li> <li> <img src='http://m.b3g6.com/bcjs/img/james1.jpg'> </li> </ul>  <span class='left'> < </span> <span class='right'> > </span>  <ul class='point'> <li style='background-color: red;'></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body></html>

其中，將圖片替換為其他圖片可以實現(xiàn)不同的輪播圖，值得一提的是，六張圖片的輪播圖需要放八張圖，第八張與第二張一致，第一張與第七張一致，真正呈現(xiàn)出來的僅僅是第二張到第七張

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。

JavaScript

上一條：原生js實現(xiàn)貪吃蛇游戲下一條：js 壓縮圖片的示例（只縮小體積，不更改圖片尺寸）

相關文章：

1. Python 制作查詢商品歷史價格的小工具2. python 使用事件對象asyncio.Event來同步協(xié)程的操作3. ASP基礎知識VBScript基本元素講解4. Python sublime安裝及配置過程詳解5. ASP.NET MVC使用jQuery ui的progressbar實現(xiàn)進度條6. Python3 json模塊之編碼解碼方法講解7. Python 合并拼接字符串的方法8. Python 利用Entrez庫篩選下載PubMed文獻摘要的示例9. Linux刪除系統(tǒng)自帶版本Python過程詳解10. 使用Python webdriver圖書館搶座自動預約的正確方法

排行榜

					
					Android 簡單的實現(xiàn)滑塊拼圖驗證碼功能
ASP.NET MVC使用jQuery ui的progressbar實現(xiàn)進度條
Android打包篇:Android Studio將代碼打包成jar包教程
springboot配置Jackson返回統(tǒng)一默認值的實現(xiàn)示例
淺談django不使用restframework自定義接口與使用的區(qū)別
樹型結(jié)構(gòu)列出指定目錄里所有文件的PHP類
Linux刪除系統(tǒng)自帶版本Python過程詳解
使用Python webdriver圖書館搶座自動預約的正確方法
ASP基礎知識VBScript基本元素講解
Python字符串到字節(jié)的轉(zhuǎn)換。雙反斜杠問題
Python 合并拼接字符串的方法
				