本文实例为大家分享了js实现轮播图自动切换的具体代码,供大家参考,具体内容如下
先看效果图
第一种
//点击按钮,序号变化 showIdx++; if (showIdx == imgArr.length) { showIdx = 0; } //所有盒子左移动 for (let i = 0; i`; } else { deleteBox.innerHTML = ``; }
第二种,图片切换,css代码
html, body, ul, li { margin: 0; padding: 0; } a { text-decoration: none; } .loopbox { width: 1226px; height: 460px; background: #030; position: relative; overflow: hidden; } .box { width: 100%; height: 100%; float: left; transition: all .3s; position: absolute; left: 0; /* overflow: hidden; */ } .box.notran{ transition: none; } .box-item { /* width: 100%; */ width: 1226px; height: 100%; float: left; background: #f1f1f1; text-align: center; font-size: 24px; line-height: 100px; /* display: none; */ /* transition: all .3s; */ } .box-item img { width: 100%; height: 100%; /* 图片适应 */ object-fit: cover; } .arrow { width: 60px; line-height: 30px; background: #f00; text-align: center; color: #f1f1f1; position: absolute; top: 50%; left: 10px; margin-top: -15px; border-radius: 15px; } .arrow:hover { background: #f60; } .arrow.arrow-right { left: auto; right: 10px; } .page { position: absolute; width: 100%; text-align: center; bottom: 10px; } .page li { display: inline-block; width: 80px; height: 8px; border-radius: 4px; background: #000; } /* .page li:first-child { background: #f90; } */ .page li:hover { background: #f60; } .page li.current { background: #f90; } .side-qq { width: 100px; height: 100px; background: #f00; /* position: fixed; */ position: absolute; right: 10px; top: 450px; } .navbar { width: 100%; background: #ccc; text-align: center; } .navbar.fixed { position: fixed; left: 0; top: 0; } .nav { height: 21px; }
js
相关推荐
目标检测:较新算法(算法介绍与开源代码)(2022.3.8)
SpringBoot+Redis 搜索栏热搜、不雅文字过滤功能
图解连续学习中的蓄水池抽样算法(The Illustrated Reservoir sampling)
2022最新综述 | 面向大规模场景的小目标检测:综述和 benchmark
pandas.read_csv() 处理 CSV 文件的 6 个有用参数
照片浏览器_照相馆拍的证件照还过不了!照片上传到底怎样才能过?
【Xilinx Vivado 时序分析/约束系列11】FPGA开发时序分析/约束-FPGA DDR-PLL接口的 input delay 约束优化方法
反向代理神器 Nginx Proxy Manager 快速部署(Docker-compose)
Qt读写Excel--QXlsx通过Document对象操作工作表3