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

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

原生js實現簡單輪播圖

瀏覽:110日期: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
相關文章:
主站蜘蛛池模板: 甲级防雷检测仪-乙级防雷检测仪厂家-上海胜绪电气有限公司 | 亮点云建站-网站建设制作平台 | 仓储货架_南京货架_钢制托盘_仓储笼_隔离网_环球零件盒_诺力液压车_货架-南京一品仓储设备制造公司 | 连续油炸机,全自动油炸机,花生米油炸机-烟台茂源食品机械制造有限公司 | 合肥汽车充电桩_安徽充电桩_电动交流充电桩厂家_安徽科帝新能源科技有限公司 | 档案密集架_电动密集架_移动密集架_辽宁档案密集架-盛隆柜业厂家现货批发销售价格公道 | 河南15年专业网站建设制作设计,做网站就找郑州启凡网络公司 | 杭州实验室尾气处理_实验台_实验室家具_杭州秋叶实验设备有限公司 | 钢结构-钢结构厂房-钢结构工程[江苏海逵钢构厂] | 大立教育官网-一级建造师培训-二级建造师培训-造价工程师-安全工程师-监理工程师考试培训 | 媒介云-全网整合营销_成都新闻媒体发稿_软文发布平台 | 山东螺杆空压机,烟台空压机,烟台开山空压机-烟台开山机电设备有限公司 | 煤矿支护网片_矿用勾花菱形网_缝管式_管缝式锚杆-邯郸市永年区志涛工矿配件有限公司 | 环保袋,无纺布袋,无纺布打孔袋,保温袋,环保袋定制,环保袋厂家,环雅包装-十七年环保袋定制厂家 | 万烁建筑设计院-建筑设计公司加盟,设计院加盟分公司,市政设计加盟 | 水厂自动化-水厂控制系统-泵站自动化|控制系统-闸门自动化控制-济南华通中控科技有限公司 | 通辽信息港 - 免费发布房产、招聘、求职、二手、商铺等信息 www.tlxxg.net | 传动滚筒_厂家-淄博海恒机械制造厂 | 北京环球北美考试院【官方网站】|北京托福培训班|北京托福培训 | 北京三友信电子科技有限公司-ETC高速自动栏杆机|ETC机柜|激光车辆轮廓测量仪|嵌入式车道控制器 | 变色龙PPT-国内原创PPT模板交易平台 - PPT贰零 - 西安聚讯网络科技有限公司 | 企典软件一站式企业管理平台,可私有、本地化部署!在线CRM客户关系管理系统|移动办公OA管理系统|HR人事管理系统|人力 | 注塑机-压铸机-塑料注塑机-卧式注塑机-高速注塑机-单缸注塑机厂家-广东联升精密智能装备科技有限公司 | Trimos测长机_测高仪_TESA_mahr,WYLER水平仪,PWB对刀仪-德瑞华测量技术(苏州)有限公司 | AGV无人叉车_激光叉车AGV_仓储AGV小车_AGV无人搬运车-南昌IKV机器人有限公司[官网] | 首页|专注深圳注册公司,代理记账报税,注册商标代理,工商变更,企业400电话等企业一站式服务-慧用心 | 东莞动力锂电池保护板_BMS智能软件保护板_锂电池主动均衡保护板-东莞市倡芯电子科技有限公司 | 经济师考试_2025中级经济师报名时间_报名入口_考试时间_华课网校经济师培训网站 | 电脑知识|软件|系统|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网 | 郑州大巴车出租|中巴车租赁|旅游大巴租车|包车|郑州旅游大巴车租赁有限公司 | 仿古瓦,仿古金属瓦,铝瓦,铜瓦,铝合金瓦-西安东申景观艺术工程有限公司 | 菲希尔FISCHER测厚仪-铁素体检测仪-上海吉馨实业发展有限公司 | 派克防爆伺服电机品牌|国产防爆伺服电机|高低温伺服电机|杭州摩森机电科技有限公司 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | pbt头梳丝_牙刷丝_尼龙毛刷丝_PP塑料纤维合成毛丝定制厂_广州明旺 | 快干水泥|桥梁伸缩缝止水胶|伸缩缝装置生产厂家-广东广航交通科技有限公司 | 酶联免疫分析仪-多管旋涡混合仪|混合器-莱普特科学仪器(北京)有限公司 | 微型实验室真空泵-无油干式真空泵-微型涡旋耐腐蚀压缩机-思科涡旋科技(杭州)有限公司 | 上海办公室装修,办公楼装修设计,办公空间设计,企业展厅设计_写艺装饰公司 | 商秀—企业短视频代运营_抖音企业号托管 | 120kv/2mA直流高压发生器-60kv/2mA-30kva/50kv工频耐压试验装置-旭明电工 |