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

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

原生JavaScript輪播圖實現方法

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

本文實例為大家分享了JavaScript輪播圖的實現方法,供大家參考,具體內容如下

效果截圖:

​注:div容器大小和圖片路徑可以自行設置,添加imga標簽后瀏覽器可以自適應.

原生JavaScript輪播圖實現方法

創建image文件夾存放圖片

原生JavaScript輪播圖實現方法

寫入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; */ /*一張圖片像素移動`1552px*/ /* right: 1552px; */}#imglist li { margin: 10px 10px;}/* 導航點 */#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;}/* 鼠標移動效果 */#nav a:hover { background-color: rgb(215, 107, 224);}</style>

用JavaScript實現功能

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

<!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; */ /*一張圖片像素移動`1552px*/ /* right: 1552px; */}#imglist li { margin: 10px 10px;}/* 導航點 */#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;}/* 鼠標移動效果 */#nav a:hover { background-color: rgb(215, 107, 224);} </style> <script type='text/javascript'>window.onload = function () { // 獲取外框屬性 var outer = document.getElementById('outer'); // 獲取imglist屬性 var imglist = document.getElementById('imglist'); // 獲取img屬性 var imgArr = document.getElementsByTagName('img'); // 獲取a屬性 var allA = document.getElementsByTagName(’a’); //獲取導航點 var nav = document.getElementById('nav'); //設置導航點居中位置 nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + 'px'; //默認顯示索引 var index = 0; allA[index].style.backgroundColor = 'rgb(215, 107, 224)'; // 切換導航點定時器 var temer = setInterval(function () {index = (++index) % allA.length;//設置導航點背景顏色allA[index].style.backgroundColor = 'rgb(215, 107, 224)';SetA();//自動切換圖片//修改圖片,一張圖片像素移動左移動1552pximglist.style.transition = 'right 1.5s'imglist.style.right = (index * 1552) + 'px';//循環顯示 }, 1800); //單擊超鏈接顯示圖片 for (var i = 0; i < allA.length; i++) {//為每個超鏈接添加索引allA[i].index = i;//為每個超鏈接綁定單擊響應函數allA[i].onclick = function () { imgIndex = this.index; //覆蓋導航點當前的位置 index = imgIndex; SetA(); //修改圖片,一張圖片像素移動左移動1552px imglist.style.transition = 'right .85s' imglist.style.right = (imgIndex * 1552) + 'px'; //修改選擇的a標簽 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>函數使用:

創建定時器:

setInterval(function () {},30)

設置圓角邊框:

border-radius: 5px;

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

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

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

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 超声波气象站_防爆气象站_空气质量监测站_负氧离子检测仪-风途物联网 | 色油机-色母机-失重|称重式混料机-称重机-米重机-拌料机-[东莞同锐机械]精密计量科技制造商 | 贴片电容-贴片电阻-二三极管-国巨|三星|风华贴片电容代理商-深圳伟哲电子 | 编织人生 - 权威手工编织网站,编织爱好者学习毛衣编织的门户网站,织毛衣就上编织人生网-编织人生 | 低压载波电能表-单相导轨式电能表-华邦电力科技股份有限公司-智能物联网综合管理平台 | 十字轴_十字轴万向节_十字轴总成-南京万传机械有限公司 | 新材料分散-高速均质搅拌机-超声波分散混合-上海化烁智能设备有限公司 | 千淘酒店差旅平台-中国第一家针对TMC行业的酒店资源供应平台 | 除湿机|工业除湿机|抽湿器|大型地下室车间仓库吊顶防爆除湿机|抽湿烘干房|新风除湿机|调温/降温除湿机|恒温恒湿机|加湿机-杭州川田电器有限公司 | 阿里巴巴诚信通温州、台州、宁波、嘉兴授权渠道商-浙江联欣科技提供阿里会员办理 | 广州监控安装公司_远程监控_安防弱电工程_无线wifi覆盖_泉威安防科技 | 附着力促进剂-尼龙处理剂-PP处理剂-金属附着力处理剂-东莞市炅盛塑胶科技有限公司 | 河南档案架,档案密集架,手动密集架,河南密集架批发/报价 | 设定时间记录电子秤-自动累计储存电子秤-昆山巨天仪器设备有限公司 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 齿轮减速马达一体式_蜗轮蜗杆减速机配电机-德国BOSERL齿轮减速电动机生产厂家 | 高压分散机(高压细胞破碎仪)百科-北京天恩瀚拓 | 深圳网站建设-高端企业网站开发-定制网页设计制作公司 | 冷藏车-东风吸污车-纯电动环卫车-污水净化车-应急特勤保障车-程力专汽厂家-程力专用汽车股份有限公司销售二十一分公司 | 吊篮式|移动式冷热冲击试验箱-二槽冷热冲击试验箱-广东科宝 | 电销卡_北京电销卡_包月电话卡-豪付网络| 私人别墅家庭影院系统_家庭影院音响_家庭影院装修设计公司-邦牛影音 | 德国进口电锅炉_商用电热水器_壁挂炉_电采暖器_电热锅炉[德国宝] | 浙江建筑资质代办_二级房建_市政_电力_安许_劳务资质办理公司 | 户外健身路径_小区健身器材_室外健身器材厂家_价格-浩然体育 | 求是网 - 思想建党 理论强党| 办公室家具_板式办公家具定制厂家-FMARTS福玛仕办公家具 | 西子馋火锅鸡加盟-太原市龙城酉鼎餐饮管理有限公司 | 警方提醒:赣州约炮论坛真的安全吗?2025年新手必看的网络交友防坑指南 | PSI渗透压仪,TPS酸度计,美国CHAI PCR仪,渗透压仪厂家_价格,微生物快速检测仪-华泰和合(北京)商贸有限公司 | [官网]叛逆孩子管教_戒网瘾学校_全封闭问题青少年素质教育_新起点青少年特训学校 | 天空彩票天下彩,天空彩天空彩票免费资料,天空彩票与你同行开奖,天下彩正版资料大全 | 郑州爱婴幼师学校_专业幼师培训_托育师培训_幼儿教育培训学校 | 超声波电磁流量计-液位计-孔板流量计-料位计-江苏信仪自动化仪表有限公司 | 天津货架厂_穿梭车货架_重型仓储货架_阁楼货架定制-天津钢力仓储货架生产厂家_天津钢力智能仓储装备 | 闭端端子|弹簧螺式接线头|防水接线头|插线式接线头|端子台|电源线扣+护线套|印刷电路板型端子台|金笔电子代理商-上海拓胜电气有限公司 | 安徽合肥项目申报咨询公司_安徽合肥高新企业项目申报_安徽省科技项目申报代理 | 丝杆升降机-不锈钢丝杆升降机-非标定制丝杆升降机厂家-山东鑫光减速机有限公司 | 磁力加热搅拌器-多工位|大功率|数显恒温磁力搅拌器-司乐仪器官网 | 天长市晶耀仪表有限公司| 时代北利离心机,实验室离心机,医用离心机,低速离心机DT5-2,美国SKC采样泵-上海京工实业有限公司 工业电炉,台车式电炉_厂家-淄博申华工业电炉有限公司 |