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

您的位置:首頁技術文章
文章詳情頁

原生js實現簡單輪播圖

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

本文實例為大家分享了js實現簡單輪播圖的具體代碼,供大家參考,具體內容如下

一、寫入網頁基本結構

body:

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

css:

初始化:

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

css設置:

根據圖片數與圖片寬度設置輪播圖寬度

二、設置js邏輯

需要完成的功能有:

1、鼠標移入輪播圖逐漸出現左右浮動塊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) // 創建一個移入出現函數 banner.addEventListener(’mouseover’,occur) function occur(){ bannerLeft.style.opacity=1; //移入逐漸出現 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://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> <!-- 左右兩個箭頭 --> <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>

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

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 防火阀、排烟防火阀、电动防火阀产品生产销售商-德州凯亿空调设备有限公司 | 玻璃钢型材-玻璃钢风管-玻璃钢管道,生产厂家-[江苏欧升玻璃钢制造有限公司] | 美名宝起名网-在线宝宝、公司、起名平台 | 沈阳庭院景观设计_私家花园_别墅庭院设计_阳台楼顶花园设计施工公司-【沈阳现代时园艺景观工程有限公司】 | 水质监测站_水质在线分析仪_水质自动监测系统_多参数水质在线监测仪_水质传感器-山东万象环境科技有限公司 | 包装机_厂家_价格-山东包装机有限公司 | 电缆桥架生产厂家_槽式/梯式_热镀锌线槽_广东东莞雷正电气 | 精密五金冲压件_深圳五金冲压厂_钣金加工厂_五金模具加工-诚瑞丰科技股份有限公司 | 光谱仪_积分球_分布光度计_灯具检测生产厂家_杭州松朗光电【官网】 | 熔体泵_熔体出料泵_高温熔体泵-郑州海科熔体泵有限公司 | 进口便携式天平,外校_十万分之一分析天平,奥豪斯工业台秤,V2000防水秤-重庆珂偌德科技有限公司(www.crdkj.com) | 盛源真空泵|空压机-浙江盛源空压机制造有限公司-【盛源官网】 | 三佳互联一站式网站建设服务|网站开发|网站设计|网站搭建服务商 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 钛合金标准件-钛合金螺丝-钛管件-钛合金棒-钛合金板-钛合金锻件-宝鸡远航钛业有限公司 | 塑胶地板-商用PVC地板-pvc地板革-安耐宝pvc塑胶地板厂家 | 安全阀_弹簧式安全阀_美标安全阀_工业冷冻安全阀厂家-中国·阿司米阀门有限公司 | 中国品牌门窗网_中国十大门窗品牌_著名门窗品牌 | 电动车头盔厂家_赠品头盔_安全帽批发_山东摩托车头盔—临沂承福头盔 | 【甲方装饰】合肥工装公司-合肥装修设计公司,专业从事安徽办公室、店面、售楼部、餐饮店、厂房装修设计服务 | 儿童乐园|游乐场|淘气堡招商加盟|室内儿童游乐园配套设备|生产厂家|开心哈乐儿童乐园 | 注塑模具_塑料模具_塑胶模具_范仕达【官网】_东莞模具设计与制造加工厂家 | 永嘉县奥阳陶瓷阀门有限公司| 网站优化公司_北京网站优化_抖音短视频代运营_抖音关键词seo优化排名-通则达网络 | 截齿|煤截齿|采煤机截齿|掘进机截齿|旋挖截齿-山东卓力截齿厂家报价 | 新材料分散-高速均质搅拌机-超声波分散混合-上海化烁智能设备有限公司 | 波纹补偿器_不锈钢波纹补偿器_巩义市润达管道设备制造有限公司 | 算命免费_生辰八字_免费在线算命 - 卜算子算命网 | 硬齿面减速机_厂家-山东安吉富传动设备股份有限公司 | 软膜天花_软膜灯箱_首选乐创品牌_一站式天花软膜材料供应商! | 行业分析:提及郑州火车站附近真有 特殊按摩 ?2025实地踩坑指南 新手如何避坑不踩雷 | 聚合甘油__盐城市飞龙油脂有限公司| 耐破强度测试仪-纸箱破裂强度试验机-济南三泉中石单品站 | 酶联免疫分析仪-多管旋涡混合仪|混合器-莱普特科学仪器(北京)有限公司 | 合肥仿石砖_合肥pc砖厂家_合肥PC仿石砖_安徽旭坤建材有限公司 | 影合社-影视人的内容合作平台 | 春腾云财 - 为企业提供专业财税咨询、代理记账服务 | 高柔性拖链电缆_卷筒电缆_耐磨耐折聚氨酯电缆-玖泰特种电缆 | 环球电气之家-中国专业电气电子产品行业服务网站! | 东莞市天进机械有限公司-钉箱机-粘箱机-糊箱机-打钉机认准东莞天进机械-厂家直供更放心! | 产业规划_产业园区规划-产业投资选址及规划招商托管一体化服务商-中机院产业园区规划网 |