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

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

基于JavaScript實現簡單的輪播圖

瀏覽:7日期:2023-06-07 17:38:35

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

js輪播圖實現思路

1、先獲取元素 盒子 左右按鈕2、鼠標經過 顯示/隱藏 左右側按鈕3、動態生成小圓圈、 添加自定義屬性4、小圓圈點擊事件 添加current類名5、添加動畫事件 animate 等于 -索引號*focusWidth6、克隆第一張圖片到最后面7、添加右側/左側按鈕點擊事件8、設置定時器 手動調用右側按鈕點擊事件

html代碼部分

<!DOCTYPE html><html lang='en'><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>Document</title> <link rel='stylesheet' href='http://www.hdgsjgj.cn/bcjs/css/index.css' > <script src='http://www.hdgsjgj.cn/bcjs/js/index.js'></script></head><body> <div class='focus'> <a href='javascript:;' class='arrow_r'>></a> <a href='javascript:;' class='arrow_l'> <</a> <ul> <li> <a href='http://www.hdgsjgj.cn/bcjs/14158.html'><img src='http://www.hdgsjgj.cn/bcjs/images/focus.jpg' alt=''></a> </li> <li> <a href='http://www.hdgsjgj.cn/bcjs/14158.html'><img src='http://www.hdgsjgj.cn/bcjs/images/focus1.jpg' alt=''></a> </li> <li> <a href='http://www.hdgsjgj.cn/bcjs/14158.html'><img src='http://www.hdgsjgj.cn/bcjs/images/focus2.jpg' alt=''></a> </li> <li> <a href='http://www.hdgsjgj.cn/bcjs/14158.html'><img src='http://www.hdgsjgj.cn/bcjs/images/focus3.jpg' alt=''></a> </li> </ul> <ol class='circle'> </ol> </div></body></html>

css樣式部分

* { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; vertical-align: top; } a { text-decoration: none; } .focus { position: relative; width: 721px; height: 455px; margin: 100px auto; overflow: hidden; } .focus ul { position: absolute; top: 0; left: 0; width: 600%; } .focus ul li { float: left; } .arrow_r, .arrow_l { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 24px; background: rgba(0, 0, 0, .2); color: #fff; z-index: 1; } .arrow_r { right: 0; } .circle { position: absolute; bottom: 10px; left: 50px; } .circle li { float: left; width: 8px; height: 8px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; margin: 0 3px; cursor: pointer; } .current { background-color: #fff; }

javascript部分

window.addEventListener(’load’, function() { //獲取元素 var focus = document.querySelector(’.focus’); var arrow_r = document.querySelector(’.arrow_r’); var arrow_l = document.querySelector(’.arrow_l’); var focusWidth = focus.offsetWidth; // 鼠標經過focus盒子 顯示/隱藏 左右側按鈕 暫停輪播 focus.addEventListener(’mouseenter’, function() { arrow_r.style.display = ’block’; arrow_l.style.display = ’block’; clearInterval(timer); timer = null; }); focus.addEventListener(’mouseleave’, function() { arrow_r.style.display = ’none’; arrow_l.style.display = ’none’; timer = setInterval(function() { //調用點擊事件 arrow_r.click(); }, 2000); }); //動態生成小圓圈 var ul = focus.querySelector(’ul’); var ol = focus.querySelector(’.circle’); for (var i = 0; i < ul.children.length; i++) { var li = document.createElement(’li’); li.setAttribute(’index’, i); ol.appendChild(li); //小圓圈點擊事件 li.addEventListener(’click’, function() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ’’; } var index = this.getAttribute(’index’); num = index; circle = index; this.className = ’current’; animate(ul, -index * focusWidth); }) } ol.children[0].className = ’current’; //克隆第一張圖片放到最后一張 var fis = ul.children[0].cloneNode(true); ul.appendChild(fis); //右側按鈕點擊事件 var num = 0; var circle = 0; arrow_r.addEventListener(’click’, function() { if (num === ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * focusWidth); circle++; if (circle === ul.children.length - 1) { circle = 0; } for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ’’; } ol.children[circle].className = ’current’; }); //左側按鈕點擊事件 arrow_l.addEventListener(’click’, function() { if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * focusWidth + ’px’; } num--; animate(ul, -num * focusWidth); circle--; circle = circle < 0 ? ol.children.length - 1 : circle; // 調用函數 circleChange(); }); //清除其余小圓圈的current類名 function circleChange() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ’’; } // 留下當前的小圓圈的current類名 ol.children[circle].className = ’current’; } //動畫函數 function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function() { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { clearInterval(obj.timer); callback && callback(); } obj.style.left = obj.offsetLeft + step + ’px’; }, 15); } //自動輪播放輪播圖 var timer = setInterval(function() { //調用點擊事件 arrow_r.click(); }, 2000);});

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

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 办公室家具公司_办公家具品牌厂家_森拉堡办公家具【官网】 | 气动隔膜泵-电动隔膜泵-循环热水泵-液下排污/螺杆/管道/化工泵「厂家」浙江绿邦 | 制丸机,小型中药制丸机,全自动制丸机价格-甘肃恒跃制药设备有限公司 | 沈阳缠绕包装机厂家直销-沈阳海鹞托盘缠绕包装机价格 | MES系统工业智能终端_生产管理看板/安灯/ESOP/静电监控_讯鹏科技 | 深圳APP开发_手机软件APP定制外包_小程序开发公司-来科信 | 盐水蒸发器,水洗盐设备,冷凝结晶切片机,转鼓切片机,絮凝剂加药系统-无锡瑞司恩机械有限公司 | 没斑啦-专业的祛斑美白嫩肤知识网站-去斑经验分享 | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛调查出轨取证公司_青岛婚外情取证-青岛探真调查事务所 | 查分易-成绩发送平台官网 | 收录网| 运动木地板厂家,篮球场木地板品牌,体育场馆木地板安装 - 欧氏运动地板 | 一体化净水器_一体化净水设备_一体化水处理设备-江苏旭浩鑫环保科技有限公司 | 云南成考网_云南成人高考报名网 粤丰硕水性环氧地坪漆-防静电自流平厂家-环保地坪涂料代理 | 珠光砂保温板-一体化保温板-有釉面发泡陶瓷保温板-杭州一体化建筑材料 | 不锈钢搅拌罐_高速搅拌罐厂家-无锡市凡格德化工装备科技有限公司 | 储能预警-储能消防系统-电池舱自动灭火装置-四川千页科技股份有限公司官网 | 液压油缸-液压站生产厂家-洛阳泰诺液压科技有限公司 | 尊享蟹太太美味,大闸蟹礼卡|礼券|礼盒在线预订-蟹太太官网 | 铝合金线槽_铝型材加工_空调挡水板厂家-江阴炜福金属制品有限公司 | 江苏大隆凯科技有限公司 | 聚合氯化铝-碱式氯化铝-聚合硫酸铁-聚氯化铝铁生产厂家多少钱一吨-聚丙烯酰胺价格_河南浩博净水材料有限公司 | 浩方智通 - 防关联浏览器 - 跨境电商浏览器 - 云雀浏览器 | 螺纹三通快插接头-弯通快插接头-宁波舜驰气动科技有限公司 | 电表箱-浙江迈峰电力设备有限公司-电表箱专业制造商 | 杜康白酒加盟_杜康酒代理_杜康酒招商加盟官网_杜康酒厂加盟总代理—杜康酒神全国运营中心 | 东莞画册设计_logo/vi设计_品牌包装设计 - 华略品牌设计公司 | 蜘蛛车-登高车-高空作业平台-高空作业车-曲臂剪叉式升降机租赁-重庆海克斯公司 | 北京网站建设|北京网站开发|北京网站设计|高端做网站公司 | 沉降天平_沉降粒度仪_液体比重仪-上海方瑞仪器有限公司 | 自动气象站_气象站监测设备_全自动气象站设备_雨量监测站-山东风途物联网 | 酒吧霸屏软件_酒吧霸屏系统,酒吧微上墙,夜场霸屏软件,酒吧点歌软件,酒吧互动游戏,酒吧大屏幕软件系统下载 | 北京租车公司_汽车/客车/班车/大巴车租赁_商务会议/展会用车/旅游大巴出租_北京桐顺创业租车公司 | 酒店厨房设计_中央厨房设计_北京商用厨房设计公司-奇能商厨 | 北京翻译公司_同传翻译_字幕翻译_合同翻译_英语陪同翻译_影视翻译_翻译盖章-译铭信息 | 头条搜索极速版下载安装免费新版,头条搜索极速版邀请码怎么填写? - 欧远全 | 避光流动池-带盖荧光比色皿-生化流动比色皿-宜兴市晶科光学仪器 东莞爱加真空科技有限公司-进口真空镀膜机|真空镀膜设备|Polycold维修厂家 | 恒温槽_恒温水槽_恒温水浴槽-上海方瑞仪器有限公司 | 悬浮拼装地板_篮球场木地板翻新_运动木地板价格-上海越禾运动地板厂家 | 上海公司注册-代理记账-招投标审计-上海昆仑扇财税咨询有限公司 上海冠顶工业设备有限公司-隧道炉,烘箱,UV固化机,涂装设备,高温炉,工业机器人生产厂家 | 低压载波电能表-单相导轨式电能表-华邦电力科技股份有限公司-智能物联网综合管理平台 |