JS实现图片轮播效果（自动和手动）

2024-01-20 03:56| 来源: 网络整理| 查看: 265

本次轮播效果图如下：

具有以下功能：1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换 3.底下小按钮切换

ps:由于很多同志反馈无法总有各种奇怪的情况，所以有需要的直接下载整个工程：JS实现图片轮播效果

以下为实现代码：

首先是html代码：

最简单的轮播效果

小按钮数量无法确定，由js动态生成

接下来是css样式：

* { margin: 0; padding: 0 } .box { width: 500px; height: 300px; border: 1px solid #ccc; margin: 100px auto; padding: 5px; } .inner{ width: 500px; height: 300px; position: relative; overflow: hidden; } .inner img{ width: 500px; height: 300px; vertical-align: top } ul { width: 1000%; position: absolute; list-style: none; left:0; top: 0; } .inner li{ float: left; } ol { position: absolute; height: 20px; right: 20px; bottom: 20px; text-align: center; padding: 5px; } ol li{ display: inline-block; width: 20px; height: 20px; line-height: 20px; background-color: #fff; margin: 5px; cursor: pointer; } ol .current{ background-color: red; } #arr{ display: none; } #arr span{ width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #fff; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #000; opacity: 0.5; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; }

第三部分是最主要的js代码：

/** * * @param id 传入元素的id * @returns {HTMLElement | null} 返回标签对象，方便获取元素 */ function my$(id) { return document.getElementById(id); } //获取各元素，方便操作 var box=my$("box"); var inner=box.children[0]; var ulObj=inner.children[0]; var list=ulObj.children; var olObj=inner.children[1]; var arr=my$("arr"); var imgWidth=inner.offsetWidth; var right=my$("right"); var pic=0; //根据li个数，创建小按钮 for(var i=0;i < > /** * * @param id 传入元素的id * @returns {HTMLElement | null} 返回标签对象，方便获取元素 */ function my$(id) { return document.getElementById(id); } //获取各元素，方便操作 var box=my$("box"); var inner=box.children[0]; var ulObj=inner.children[0]; var list=ulObj.children; var olObj=inner.children[1]; var arr=my$("arr"); var imgWidth=inner.offsetWidth; var right=my$("right"); var pic=0; //根据li个数，创建小按钮 for(var i=0;i

【本文地址】

公司简介

联系我们