点击图片进行切换

已于 2022-04-12 14:41:44 修改
阅读量933 收藏 1
点赞数
分类专栏： JavaScript 文章标签： css3
于 2022-04-12 14:41:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124123508
版权

实现效果：图片点击切换

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../reset.css">
    <style>
        .img-list{
            width: 480px;
            height: 850px;
            margin: 0 auto;
            /* 为a提供参照 */
            position:relative;
        }
        img{
            width: 480px;
            height: 850px;
            object-fit: cover;
        }
        .img-list li{
            /* 开启绝对定位使之可以设置 z-index */
            position: absolute;
        }
        .img-list li:nth-child(3){
            z-index: 1;
        }
        .pointer{
            /* 开启绝对定位放在上面 */
            position: absolute;
            z-index: 999;
            bottom: 40px;
            margin-left: 140px;
        }
        .pointer a{
            /* display: block; */
            /* 横向排列 */
            float: left;
            width: 20px;
            height: 20px;
            background-color: salmon;
            margin-left: 20px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.3);


            /*默认情况下background-color的颜色是会延伸到边框下面的，如果我们不想要延申，需要设置 */
            background-clip: content-box;
            border:2px solid transparent;
        }
        .pointer a.active,
        .pointer a:hover
        {
            background-color: #fff;
            border:3px solid rgba(0, 0, 0, 0.3);

        }
        
    </style>
    <script>
        window.onload =function(){
            var imgArray = ["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.png","./img/5.jpg"];
            var allA =  document.getElementsByTagName("a");
            var img = document.getElementsByTagName("img")[0];

            for(var i =0 ;i<allA.length;i++){
                allA[i].num = i;
                allA[i].onclick=function(){
                    // 使用this.name,！！不能使用allA[i].name,因为i此时已经等于5了。
                    var index = this.num;
                    img.src=imgArray[index];

                     for(var j =0 ;j<allA.length;j++){
                         allA[j].className="";
                     }
                    this.className = "active";
                }
            }
        }
    </script>

</head>
<body>
    <ul class="img-list">
        <li><img src="./img/1.jpg" alt=""></li>
        <!-- <li><a href="javascript:;"><img src="./img/2.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/3.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/4.png" alt=""></a></li>
        <li><a href="javascript:;"><img src="./img/5.jpg" alt=""></a></li> -->

        <div class="pointer">
            <a href="javascript:;" class="active"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </ul>
</body>
</html>
_洋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js-切换图片
m0_60501766的博客
10-06 2562
本文收集了JS实现切换图片的多种实现方法 1.简易的四个按钮实现点击切换 首先给出4个button按钮，分别命名为图片1、2、3、4，准备好四张图片 代码如下： <div id="buttons"> <button>图片1</button> <button>图片2</button> <button>图片3</button> <button>图片4</butto
使用js实现点击切换图片
IM_GOOD的博客
03-16 1513
【代码】使用js实现点击切换图片。
前端技术-(图片切换)
最新发布
xxj123_的博客
08-21 1712
前言：图片切换是前端页面十分常见的技术，主要是应用在首页的数据展示，并且会具有很多不同的切换的切换效果十分的炫酷。虽然有很多的已经封装好的效果提供使用，但是理解最基础的原理的还是一些必要。点击切换按钮，可以切换图片。这里实现的原理，设置一个index作为图片的下标，点击下一张的时候将index++，就可以实现图片的切换。提示：一般情况下的在图片上会有小圆点，提供点击来实现图片之间的切换。图片切换最核心的原理，就是图片的将图片放在数组里面，操作图片数组的下标。逻辑：当点击按钮的时候，下面的小图片也需要切换。
点击图片切换另一张图片
yz1743585120的博客
10-25 5771
chang_msg: &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt; &lt;item android:state_selected="true" android:drawable="@drawable/abx"&gt;&lt;/item&gt; &lt;item and
鼠标点击切换图片(使用js中的src属性)
周百万的博客
07-02 2300
6、使用模板字符串 ` xxx ` 中的 ${ i } 来获取动态的 i 值，将每次点击之后的 i 的值，放到img的src中，实现点击切换图片的效果。5、给图片添加一个点击事件，点击图片的时候，使用img.src = `xxx`来改变img中图片的路径。1、先创建一个盒子，里面放图片，让图片的宽和高等于父盒子的高度（让图片占满父盒子）。需要在里面创建一个images文件夹，里面有自定义张图片，为可方便使用数字进行命名。3、在外面定义一个全局的 i 变量，赋值为1,（因为图片的命名是从1开始的）。
vue导航点击切换图片
boy火巨的博客
03-04 7427
导航切换后对应的彩色图片 换成白色的图片；之前发过一篇用for循环出来三个按钮的切换图片的方法。有兴趣的可以看下https://blog.csdn.net/qq_42221334/article/details/81630634，现在介绍的是未用for循环的方法，因之前别人写好的代码，功能没做出来我这里给修改下把功能实现了！ html <template> <d...
手机点击按钮进行切换图片
10-08
对于这个场景，可能需要一个或多个ImageView用于展示图片，以及一个Button用于触发图片切换。例如，XML布局文件可能会包含以下代码： ```xml android:layout_width="match_parent" android:layout_height="match...
点击切换图片
01-28
记得在启动时启动计时器，并在图片切换时停止和重新启动，以避免频繁触发。 4. **提示音**： - 引入NAudio库，它提供了播放音频文件的能力。在点击按钮时，调用Play方法播放音频文件。例如：`new WaveOutEvent()....
点击进行图片切换、自动切换
11-13
"点击进行图片切换"和"自动切换"是两种不同的图片展示方式，它们为用户提供了一种动态且直观的方式来浏览多张图片。 点击进行图片切换，通常指的是用户通过点击某个按钮或图片本身来更换显示的图片。这种功能的实现...
点击图片切换背景网页特效
11-18
在网页设计中，实现“点击图片切换背景”的特效是一种常见的交互设计手法，它可以提升用户体验，增加网站的趣味性和互动性。这种特效通常涉及到HTML、CSS和JavaScript等技术的结合运用。接下来，我们将深入探讨如何...
Jquery 点击切换图片
08-09
通过这种方式，用户每次点击“切换图片”按钮，图片就会在`images`数组中的URL之间进行切换。这个简单的例子展示了jQuery如何通过绑定事件、操作DOM属性以及处理数组数据来实现动态效果，对初学者来说是一个很好的...
点击按钮切换图片
weixin_45743799的博客
11-03 5552
点击按钮时将当前显示的图片切换为指定要显示的图片 效果图演示 未点击更换图片之前显示的图片 点击更换图片之后 程序详解： 准备两张互相切换的图片 给更换图片按钮添加点击事件 把两张图片放在一个数组里 点击按钮后执行判断如果是第一张图片就换成第二张，如果是第二张图片就换成第一张 代码演示 注意： 我的两个图片命名为0.jpg和1.jpg <!DOCTYPE html> <h...
JavaScript随手笔记---轮播图（点击切换）
JMFive的博客
02-16 4995
大家好，又见面了，我是夜阑的狗，本文是专栏 【JavaScript随手笔记】专栏的第3篇文章;今天被丢了一个需求 😀 😀 😀，里面就需要实现轮播图，以前在学校时候实现过，但没做记录（博客），基本就模模糊糊的感觉，所以这次就把实现过程跟原理记录下来；【JavaScript随手笔记】， 此专栏是我是夜阑的狗对JS轮播图实现的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。
通过点击按钮，实现图片的切换。最简单的js方法！
热门推荐
qq_44890362的博客
08-11 1万+
大家可以看到上面的图片，以及它的两个按钮。废话不多说，开始展示代码！ 1.首先是HTML结构代码，非常简单。 <body> <div class="banner"> <img id="img" src="img/1.jpg" alt=""> <p> <button id="btnPrev">上一张</button>...
jQuery点击图片来回切换功能
祈澈菇凉
08-09 3838
在项目里，有时候会写这样的开关效果，点击开关来回切换，也就是jquery实现点击图片切换为另一图片,再次点击恢复到原图片。 下面是一个小的demo示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title&gt...
JS按钮单击事件及手动切换图片
qq_47043757的博客
08-08 2707
图片的切换以及xx.onclick=function(){} 与 addEventListener()绑定事件。1. 两个单击事件完成图片的切换。用于少数的图片，做一个切换。2.手动切换几张图片。
Vue中＜img＞标签图片想实现动态切换时，无法正常显示问题
头发掉光光的博客
10-22 4441
目录 问题描述 解决办法 问题描述 最近又在写项目，写到点赞这个地方的时候，想要实现一个图片的动态切换。本以为是一个很简单的问题，没想到却出了问题。 首先我们来看看不进行动态切换时的状态： <img src="../assets/image/踩.svg"> 此时的浏览器控制台显示的是这样的: 图片的路径和我们在编辑器中写的是有出入的。 而当我想要是实现动态切换时，我最...
#vue# @click=“”实现点击切换不同的图片
ZHENGCHUNJUN的博客
07-05 6583
#vue# @click=“”实现点击切换不同的图片
JavaScript学习笔记：完成点击按钮切换图片
薛定谔的猫
10-07 1466
之前实现了外观，现阶段实现点击超链接切换到指定的图片，点击第一个,显示第一张。先执行for循环，然后是单击响应函数，因此i一直都是5。问题：还是需要用手点击，没法实现自动切换。
html点击图片切换图片
05-26
点击图片切换图片 function changeImage() { var image = document.getElementById("myImage"); if (image.src.match("image1")) { image.src = "image2.jpg"; } else { image.src = "image1.jpg"; } } ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值