电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

原生js實(shí)現(xiàn)簡(jiǎn)單輪播圖

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

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

一、寫入網(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'> <!-- 寫出輪播圖框架 --> <div class='banner'> <ul class='bannerList'> <li> <img src='http://www.hdgsjgj.cn/bcjs/img/james6.jpeg'> </li> <li> <img src='http://www.hdgsjgj.cn/bcjs/img/james1.jpg'> </li> <li> <img src='http://www.hdgsjgj.cn/bcjs/img/james2.jpg'> </li> <li> <img src='http://www.hdgsjgj.cn/bcjs/img/james3.jpg'> </li> <li> <img src='http://www.hdgsjgj.cn/bcjs/img/james4.jpg'> </li> <li> <img src='http://www.hdgsjgj.cn/bcjs/img/james5.jpeg'> </li> <li> <img src='http://www.hdgsjgj.cn/bcjs/img/james6.jpeg'> </li> <li> <img src='http://www.hdgsjgj.cn/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)。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 二手色谱仪器,十万分之一分析天平,蒸发光检测器,电位滴定仪-湖北捷岛科学仪器有限公司 | 仓储货架_南京货架_钢制托盘_仓储笼_隔离网_环球零件盒_诺力液压车_货架-南京一品仓储设备制造公司 | 变色龙PPT-国内原创PPT模板交易平台 - PPT贰零 - 西安聚讯网络科技有限公司 | 超声波成孔成槽质量检测仪-压浆机-桥梁预应力智能张拉设备-上海硕冠检测设备有限公司 | 杭州ROHS检测仪-XRF测试仪价格-百科 | 房车价格_依维柯/大通/东风御风/福特全顺/江铃图片_云梯搬家车厂家-程力专用汽车股份有限公司 | 博客-悦享汽车品质生活| 安平县鑫川金属丝网制品有限公司,防风抑尘网,单峰防风抑尘,不锈钢防风抑尘网,铝板防风抑尘网,镀铝锌防风抑尘网 | 天空彩票天下彩,天空彩天空彩票免费资料,天空彩票与你同行开奖,天下彩正版资料大全 | 淬火设备-钎焊机-熔炼炉-中频炉-锻造炉-感应加热电源-退火机-热处理设备-优造节能 | 警方提醒:赣州约炮论坛真的安全吗?2025年新手必看的网络交友防坑指南 | 电动百叶窗,开窗器,电动遮阳百叶,电动开窗机生产厂家-徐州鑫友工控科技发展有限公司 | 沈飞防静电地板__机房地板-深圳市沈飞防静电设备有限公司 | 蔡司三坐标-影像测量机-3D扫描仪-蔡司显微镜-扫描电镜-工业CT-ZEISS授权代理商三本工业测量 | 红酒招商加盟-葡萄酒加盟-进口红酒代理-青岛枞木酒业有限公司 | 比亚迪叉车-比亚迪电动叉车堆垛车托盘车仓储叉车价格多少钱报价 磁力去毛刺机_去毛刺磁力抛光机_磁力光饰机_磁力滚抛机_精密金属零件去毛刺机厂家-冠古科技 | 隐形纱窗|防护纱窗|金刚网防盗纱窗|韦柏纱窗|上海青木装潢制品有限公司|纱窗国标起草单位 | 高考志愿规划师_高考规划师_高考培训师_高报师_升学规划师_高考志愿规划师培训认证机构「向阳生涯」 | 粒米特测控技术(上海)有限公司-测功机_减速机测试台_电机测试台 | 粉末冶金-粉末冶金齿轮-粉末冶金零件厂家-东莞市正朗精密金属零件有限公司 | 上海办公室装修,办公楼装修设计,办公空间设计,企业展厅设计_写艺装饰公司 | 艾默生变频器,艾默生ct,变频器,ct驱动器,广州艾默生变频器,供水专用变频器,风机变频器,电梯变频器,艾默生变频器代理-广州市盟雄贸易有限公司官方网站-艾默生变频器应用解决方案服务商 | 武汉EPS线条_EPS装饰线条_EPS构件_湖北博欧EPS线条厂家 | 深圳市人通智能科技有限公司| 气象监测系统_气象传感器_微型气象仪_气象环境监测仪-山东风途物联网 | 超声波分散机-均质机-萃取仪-超声波涂料分散设备-杭州精浩 | ERP企业管理系统永久免费版_在线ERP系统_OA办公_云版软件官网 | 招商帮-一站式网络营销服务|搜索营销推广|信息流推广|短视视频营销推广|互联网整合营销|网络推广代运营|招商帮企业招商好帮手 | 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 优秀的临床医学知识库,临床知识库,医疗知识库,满足电子病历四级要求,免费试用 | 上海电子秤厂家,电子秤厂家价格,上海吊秤厂家,吊秤供应价格-上海佳宜电子科技有限公司 | 高铝轻质保温砖_刚玉莫来石砖厂家_轻质耐火砖价格 | PVC地板|PVC塑胶地板|PVC地板厂家|地板胶|防静电地板-无锡腾方装饰材料有限公司-咨询热线:4008-798-128 | 拉伸膜,PE缠绕膜,打包带,封箱胶带,包装膜厂家-东莞宏展包装 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 贴片电容代理-三星电容-村田电容-风华电容-国巨电容-深圳市昂洋科技有限公司 | 网站建设-临朐爱采购-抖音运营-山东兆通网络科技 | 移动厕所租赁|移动卫生间|上海移动厕所租赁-家瑞租赁 | 合肥防火门窗/隔断_合肥防火卷帘门厂家_安徽耐火窗_良万消防设备有限公司 | 高精度电阻回路测试仪-回路直流电阻测试仪-武汉特高压电力科技有限公司 | 液氮罐_液氮容器_自增压液氮罐-北京君方科仪科技发展有限公司 |