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

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

原生JavaScript輪播圖實(shí)現(xiàn)方法

瀏覽:2日期:2023-05-30 13:03:23

本文實(shí)例為大家分享了JavaScript輪播圖的實(shí)現(xiàn)方法,供大家參考,具體內(nèi)容如下

效果截圖:

​注:div容器大小和圖片路徑可以自行設(shè)置,添加imga標(biāo)簽后瀏覽器可以自適應(yīng).

原生JavaScript輪播圖實(shí)現(xiàn)方法

創(chuàng)建image文件夾存放圖片

原生JavaScript輪播圖實(shí)現(xiàn)方法

寫(xiě)入html文本

<body>//圖片路徑可以自己更改 <div id='outer'> <ul id='imglist'> <li><img src='http://www.hdgsjgj.cn/bcjs/image/8.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/7.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/8.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/7.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/8.jpg' alt=''></li> </ul> <div id='nav'> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> </div> </div></body>

加入Css樣式

<style>* { margin: 0px; padding: 0px;}/* 外框容器 */#outer { width: 1555px; height: 600px; background-color: #bfa; margin: 100px auto; position: relative; /* 隱藏 */ overflow: hidden;}/* 圖片列表 */#imglist { /* 彈性盒布局 */ display: flex; list-style: none; position: relative; /* 布局方向 */ /* flex-direct5on: row; */ /*一張圖片像素移動(dòng)`1552px*/ /* right: 1552px; */}#imglist li { margin: 10px 10px;}/* 導(dǎo)航點(diǎn) */#nav { display: flex; list-style: none; position: absolute; bottom: 50px; /* 1555/2 - 6*(20+25)/2 */ /* left: 642px; */}#nav a { width: 25px; height: 25px; margin: 0px 10px; background-color: rgb(223, 129, 52); border-radius: 5px;}/* 鼠標(biāo)移動(dòng)效果 */#nav a:hover { background-color: rgb(215, 107, 224);}</style>

用JavaScript實(shí)現(xiàn)功能

<script type='text/javascript'> window.onload = function () { // 獲取外框?qū)傩? var outer = document.getElementById('outer'); // 獲取imglist屬性 var imglist = document.getElementById('imglist'); // 獲取img屬性 var imgArr = document.getElementsByTagName('img'); // 獲取a屬性 var allA = document.getElementsByTagName(’a’); //獲取導(dǎo)航點(diǎn) var nav = document.getElementById('nav'); //設(shè)置導(dǎo)航點(diǎn)居中位置 nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + 'px'; //默認(rèn)顯示索引 var index = 0; allA[index].style.backgroundColor = 'rgb(215, 107, 224)'; // 切換導(dǎo)航點(diǎn)定時(shí)器 var temer = setInterval(function () {//循環(huán)顯示index = (++index) % allA.length;//設(shè)置導(dǎo)航點(diǎn)背景顏色allA[index].style.backgroundColor = 'rgb(215, 107, 224)';SetA();//自動(dòng)切換圖片//修改圖片,一張圖片像素移動(dòng)左移動(dòng)1552pximglist.style.transition = 'right 1.5s'imglist.style.right = (index * 1552) + 'px'; }, 1800); //單擊超鏈接顯示圖片 for (var i = 0; i < allA.length; i++) {//為每個(gè)超鏈接添加索引allA[i].index = i;//為每個(gè)超鏈接綁定單擊響應(yīng)函數(shù)allA[i].onclick = function () { imgIndex = this.index; //覆蓋導(dǎo)航點(diǎn)當(dāng)前的位置 index = imgIndex; SetA(); //修改圖片,一張圖片像素移動(dòng)左移動(dòng)1552px imglist.style.transition = 'right .85s' imglist.style.right = (imgIndex * 1552) + 'px'; //修改選擇的a標(biāo)簽 allA[imgIndex].style.backgroundColor = 'rgb(215, 107, 224)';}; } //清除a的樣式 function SetA() {for (var i = 0; i < allA.length; i++) { allA[i].style.backgroundColor = '';}//給當(dāng)前導(dǎo)航設(shè)定allA[index].style.backgroundColor = 'rgb(215, 107, 224)'; }};</script>完整代碼

<!DOCTYPE html><html lang='zh'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>輪播圖</title> <style>* { margin: 0px; padding: 0px;}/* 外框容器 */#outer { width: 1555px; height: 600px; background-color: #bfa; margin: 100px auto; position: relative; /* 隱藏 */ overflow: hidden;}/* 圖片列表 */#imglist { /* 彈性盒布局 */ display: flex; list-style: none; position: relative; /* 布局方向 */ /* flex-direct5on: row; */ /*一張圖片像素移動(dòng)`1552px*/ /* right: 1552px; */}#imglist li { margin: 10px 10px;}/* 導(dǎo)航點(diǎn) */#nav { display: flex; list-style: none; position: absolute; bottom: 50px; /* 1555/2 - 6*(20+25)/2 */ /* left: 642px; */}#nav a { width: 25px; height: 25px; margin: 0px 10px; background-color: rgb(223, 129, 52); border-radius: 5px;}/* 鼠標(biāo)移動(dòng)效果 */#nav a:hover { background-color: rgb(215, 107, 224);} </style> <script type='text/javascript'>window.onload = function () { // 獲取外框?qū)傩? var outer = document.getElementById('outer'); // 獲取imglist屬性 var imglist = document.getElementById('imglist'); // 獲取img屬性 var imgArr = document.getElementsByTagName('img'); // 獲取a屬性 var allA = document.getElementsByTagName(’a’); //獲取導(dǎo)航點(diǎn) var nav = document.getElementById('nav'); //設(shè)置導(dǎo)航點(diǎn)居中位置 nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + 'px'; //默認(rèn)顯示索引 var index = 0; allA[index].style.backgroundColor = 'rgb(215, 107, 224)'; // 切換導(dǎo)航點(diǎn)定時(shí)器 var temer = setInterval(function () {index = (++index) % allA.length;//設(shè)置導(dǎo)航點(diǎn)背景顏色allA[index].style.backgroundColor = 'rgb(215, 107, 224)';SetA();//自動(dòng)切換圖片//修改圖片,一張圖片像素移動(dòng)左移動(dòng)1552pximglist.style.transition = 'right 1.5s'imglist.style.right = (index * 1552) + 'px';//循環(huán)顯示 }, 1800); //單擊超鏈接顯示圖片 for (var i = 0; i < allA.length; i++) {//為每個(gè)超鏈接添加索引allA[i].index = i;//為每個(gè)超鏈接綁定單擊響應(yīng)函數(shù)allA[i].onclick = function () { imgIndex = this.index; //覆蓋導(dǎo)航點(diǎn)當(dāng)前的位置 index = imgIndex; SetA(); //修改圖片,一張圖片像素移動(dòng)左移動(dòng)1552px imglist.style.transition = 'right .85s' imglist.style.right = (imgIndex * 1552) + 'px'; //修改選擇的a標(biāo)簽 allA[imgIndex].style.backgroundColor = 'rgb(215, 107, 224)';}; } //清除a的樣式 function SetA() {for (var i = 0; i < allA.length; i++) { allA[i].style.backgroundColor = '';}allA[index].style.backgroundColor = 'rgb(215, 107, 224)'; }}; </script></head><body> <div id='outer'><ul id='imglist'> <li><img src='http://www.hdgsjgj.cn/bcjs/image/8.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/7.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/8.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/7.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/6.jpg' alt=''></li> <li><img src='http://www.hdgsjgj.cn/bcjs/image/8.jpg' alt=''></li></ul><div id='nav'> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a> <a href='JavaScript:;'></a></div> </div></body></html>函數(shù)使用:

創(chuàng)建定時(shí)器:

setInterval(function () {},30)

設(shè)置圓角邊框:

border-radius: 5px;

offsetWidth 水平方向 width + 左右padding + 左右borderoffsetHeight 垂直方向 height + 上下padding + 上下border

clientWidth 水平方向 width + 左右paddingclientHeight 垂直方向 height + 上下padding

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: Safety light curtain|Belt Sway Switches|Pull Rope Switch|ultrasonic flaw detector-Shandong Zhuoxin Machinery Co., Ltd | 不锈钢螺丝,不锈钢螺栓,不锈钢标准件-江苏百德特种合金有限公司 交变/复合盐雾试验箱-高低温冲击试验箱_安奈设备产品供应杭州/江苏南京/安徽马鞍山合肥等全国各地 | 喷播机厂家_二手喷播机租赁_水泥浆洒布机-河南青山绿水机电设备有限公司 | 砂尘试验箱_淋雨试验房_冰水冲击试验箱_IPX9K淋雨试验箱_广州岳信试验设备有限公司 | 国资灵活用工平台_全国灵活用工平台前十名-灵活用工结算小帮手 | 中国产业发展研究网 - 提供行业研究报告 可行性研究报告 投资咨询 市场调研服务 | 合肥仿石砖_合肥pc砖厂家_合肥PC仿石砖_安徽旭坤建材有限公司 | 章丘丰源机械有限公司 - 三叶罗茨风机,罗茨鼓风机,罗茨风机 | 湖南教师资格网-湖南教师资格证考试网| 万家财经_财经新闻_在线财经资讯网| 冷水机,风冷冷水机,水冷冷水机,螺杆冷水机专业制造商-上海祝松机械有限公司 | 暴风影音| 电子巡更系统-巡检管理系统-智能巡检【金万码】 | 大流量卧式砂磨机_强力分散机_双行星双动力混合机_同心双轴搅拌机-莱州市龙跃化工机械有限公司 | 镀锌方管,无缝方管,伸缩套管,方矩管_山东重鑫致胜金属制品有限公司 | 铝合金电阻-无源谐波滤波器-上海稳达电讯设备厂 | 户外-组合-幼儿园-不锈钢-儿童-滑滑梯-床-玩具-淘气堡-厂家-价格 | 氨水-液氨-工业氨水-氨水生产厂家-辽宁顺程化工| 手表腕表维修保养鉴定售后服务中心网点 - 名表维修保养 | CCE素质教育博览会 | CCE素博会 | 教育展 | 美育展 | 科教展 | 素质教育展 | 顺景erp系统_erp软件_erp软件系统_企业erp管理系统-广东顺景软件科技有限公司 | 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 青岛空压机,青岛空压机维修/保养,青岛空压机销售/出租公司,青岛空压机厂家电话 | 南京PVC快速门厂家南京快速卷帘门_南京pvc快速门_世界500强企业国内供应商_南京美高门业 | C形臂_动态平板DR_动态平板胃肠机生产厂家制造商-普爱医疗 | 重庆磨床过滤机,重庆纸带过滤机,机床伸缩钣金,重庆机床钣金护罩-重庆达鸿兴精密机械制造有限公司 | 蔬菜配送公司|蔬菜配送中心|食材配送|饭堂配送|食堂配送-首宏公司 | 超声波清洗机_超声波清洗机设备_超声波清洗机厂家_鼎泰恒胜 | 东莞螺丝|东莞螺丝厂|东莞不锈钢螺丝|东莞组合螺丝|东莞精密螺丝厂家-东莞利浩五金专业紧固件厂家 | 长春网站建设,五合一网站设计制作,免费优化推广-长春网站建设 | 模具钢_高速钢_不锈钢-万利钢金属材料| 北京模型公司-工业模型-地产模型-施工模型-北京渝峰时代沙盘模型制作公司 | 10吨无线拉力计-2吨拉力计价格-上海佳宜电子科技有限公司 | 交通信号灯生产厂家_红绿灯厂家_电子警察监控杆_标志杆厂家-沃霖电子科技 | 网站建设-网站制作-网站设计-网站开发定制公司-网站SEO优化推广-咏熠软件 | 昆明挖掘机修理厂_挖掘机翻新再制造-昆明聚力工程机械维修有限公司 | 全自动变压器变比组别测试仪-手持式直流电阻测试仪-上海来扬电气 | 广州冷却塔维修厂家_冷却塔修理_凉水塔风机电机填料抢修-广东康明节能空调有限公司 | 气力输送设备_料封泵_仓泵_散装机_气化板_压力释放阀-河南锐驰机械设备有限公司 | 工业冷却塔维修厂家_方形不锈钢工业凉水塔维修改造方案-广东康明节能空调有限公司 | 板框压滤机-隔膜压滤机-厢式压滤机生产厂家-禹州市君工机械设备有限公司 |