JavaScript简单点击切换效果—

如何实现一个简单轮播图效果，通过点击切换图片？在JavaScript内容的实现是使用点击触发事件，改变src图片路径。

直接展示JS代码哈！

// 创建一个数组来保存图片的路径var imgArr = ["img/001.jpg", "img/002.jpg", "img/003.jpg", "img/004.jpg"];var imgs = document.getElementById("imgs");// 获取按钮对象// 获取元素function getId(ids) {return document.getElementById(ids);}function getOnClick(getIds, i) {getIds.onclick = function () {imgs.src = imgArr[i];}}getOnClick(getId("one"), 0)getOnClick(getId("two"), 1)getOnClick(getId("three"), 2)getOnClick(getId("four"), 3)

以下是大致的效果图>>>

下面是我的HTML布局和css样式，还可以继续美化得更好看哦~

<body><div class="enclosure"><div class="picture"><img src="img/001.jpg" alt="" id="imgs" draggable="false"><div class="handoffBox"><div class="handoff" id="one"><img src="img/001.jpg" alt="" width="77px" height="57px" draggable="false"></div><div class="handoff" id="two"><img src="img/002.jpg" alt="" width="77px" height="57px" draggable="false"></div><div class="handoff" id="three"><img src="img/003.jpg" alt="" width="77px" height="57px" draggable="false"></div><div class="handoff" id="four"><img src="img/004.jpg" alt="" width="77px" height="57px" draggable="false"></div></div></div></div>
</body>

<style>body {width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;}.enclosure {width: 660px;height: 420px;background: #f0a77d;border-radius: 30px;box-shadow: 0px 0px 10px 5px #f0a77d;}.picture {margin-left: 43px;margin-top: 56px;}img {position: absolute;box-shadow: 0px 0px 10px 5px #ded062;}.handoffBox {position: relative;}.handoff {width: 80px;height: 60px;background: #8dcb63;float: left;margin-top: 230px;margin-left: 20px;display: flex;justify-content: center;align-items: center;}
</style>

感谢你的观看~

JavaScript简单点击切换效果——轮播图相关推荐

使用CSS实现简单的图片切换（轮播图）
使用CSS实现简单的图片切换(轮播图) 预览图如下: 目录使用CSS实现简单的图片切换(轮播图) 一:首先创建基本布局 1:创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点: 二 ...
纯css就能实现可点击切换的轮播图，feel起来很丝滑
前言轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
老徐WEB：JS简单实现图片滚动效果轮播图，自动、手动和自适应(二)
轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯.电商和个人博客等,首页基本都会有轮播图. 老徐在上一篇文章的基础上[最简单详细的轮播图原理和制作过程],又扩展了功能,使之成为 ...
实现广告图片切换效果轮播图效果
轮播图代码: <!DOCTYPE html> <html lang="en">s <head><meta charset="UT ...
用js实现点击切换+自动切换的轮播图
用js实现点击切换+自动切换的轮播图之前博主写过一篇用css实现轮播图的文章,可以看到用css实现的轮播图也能实现我们所需要的功能.那么这些功能用js该如何实现呢?我们一起来看下吧! (ps:博主在 ...
Js实现图片点击切换与轮播
Js实现图片点击切换与轮播图片点击切换 <!DOCTYPE html> <html><head> <meta charset="UTF-8&quo ...
简单的手写jquery轮播图（包含切换按钮、小圆点）
简单的手写jquery轮播图(包含切换按钮.小圆点) css代码 * {margin: 0;padding: 0; }.container {width: 800px;height: 400px;ma ...
html js轮播图无白链接,JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)...
简介这篇文章主要介绍了JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧,文章约11114字,浏览量505,点赞数3,值得参考! *{ margin:0; pa ...
html旋转木马切换效果,超酷jQuery 3D旋转木马效果轮播图插件 -HTML5功能
简要教程 jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得 ...

JavaScript简单点击切换效果——轮播图

JavaScript简单点击切换效果——轮播图相关推荐

最新文章

热门文章