简单图片切换

最新推荐文章于 2023-08-21 13:55:36 发布
最新推荐文章于 2023-08-21 13:55:36 发布
阅读量234 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Erin_jwx/article/details/119037004
版权

JavaScript 图片切换 DOM操作 事件监听 数组
关键词由CSDN通过智能技术生成

JS基础 简单实现图片切换
在这里插入图片描述

摸鱼写的代码

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .box{
            width: 500px;
            margin: 50px auto;
            text-align: center;
            background-color: #bfa;
        }
    </style>
    <script>
        window.onload = function()
        {
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var img = document.getElementsByTagName("img")[0];
            var info = document.getElementById("info");
            var addr = ["lib/img2/1.jpg","lib/img2/2.jpg",
            "lib/img2/3.jpg","lib/img2/4.jpg","lib/img2/5.jpg"];
            var index = 0;
            prev.onclick = function(){
                // alert("上一张");
                index--;
                if(index == -1) index = addr.length-1;
                img.src = addr[index];
                info.innerHTML = "一共"+addr.length+"张图片，当前是第"+(index+1)+"张";
            }
            next.onclick = function(){
                // alert("下一张");
                index++;
                if(index == addr.length) index = 0;
                img.src = addr[index];
                info.innerHTML = "一共"+addr.length+"张图片，当前是第"+(index+1)+"张";
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <p id="info">一共5张图片，当前是第1张</p>
        <img src="lib/img2/1.jpg">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>
AC它真的很香
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery简单图片切换显示效果实现方法
10-24
主要介绍了jquery简单图片切换显示效果实现方法,可以实现简单的图片切换功能,具有一定参考借鉴价值,需要的朋友可以参考下
Flash简单图片切换.rar
07-10
在本资源"Flash简单图片切换.rar"中，包含了一个基于Flash技术实现的简易图片切换功能。这个项目非常适合初学者学习，因为它展示了如何在Flash环境中创建一个具有视觉吸引力的图片幻灯片，同时提供了平滑的淡入淡出...
前端技术-(图片切换)
最新发布
xxj123_的博客
08-21 1738
前言：图片切换是前端页面十分常见的技术，主要是应用在首页的数据展示，并且会具有很多不同的切换的切换效果十分的炫酷。虽然有很多的已经封装好的效果提供使用，但是理解最基础的原理的还是一些必要。点击切换按钮，可以切换图片。这里实现的原理，设置一个index作为图片的下标，点击下一张的时候将index++，就可以实现图片的切换。提示：一般情况下的在图片上会有小圆点，提供点击来实现图片之间的切换。图片切换最核心的原理，就是图片的将图片放在数组里面，操作图片数组的下标。逻辑：当点击按钮的时候，下面的小图片也需要切换。
js实现图片切换效果
qq_46162047的博客
03-09 2110
JS实现图片切换
JS练习：切换图片
weixin_34319374的博客
10-18 95
代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function changeImg() { var img =...
简单的图片切换
weixin_40679578的博客
03-29 573
一直想开始写博客但是总感觉水平不够，今天算是想明白了，总是要记录一下自己进步的过程才能看到自己的成长。 今天是复习了dom，之前学dom觉得很难，dom其实就是把页面里的所有元素转成一个对象然后用他们之间的关系模型找到对象，找对象之后，就搞对象（引用老师的话来说），就这么简单； <!DOCTYPE html> <html> <head> <meta ...
HTML页面；js动态切换图片（2种方法。。。持续更新。。。）
热门推荐
wstm2016的博客
07-17 2万+
一、 思路是先定义一个图片显示块div， 在块内定义图片列表以float：left横排； 改变图片列表的位置以显示不同的图片； HTML代码如下： <div id="slide"> <ul id="photos"> <li><img src="images/pic1.jpg"></li> ...
基于Jquery的简单图片切换效果
10-28
Jquery实现简单图片切换效果代码，需要的朋友可以参考下。
简单、可修改的图片切换
11-16
本项目提供的"简单、可修改的图片切换"是一个轻量级的解决方案，适用于开发者快速构建具有图片切换功能的界面。 这个解决方案的核心在于它的简洁性和可定制性。简洁意味着代码结构清晰，易于理解和维护。对于初学者...
图片切换java图片切换java图片切换java
10-20
首页广告首页广告首页广告首页广告首页广告
实现图片切换效果
11-11
这是通过js来实现图片切换的效果,具有鼠标事件
js 简单图片切换
04-02
NULL 博文链接：https://julyzergcn.iteye.com/blog/1452163
js 简单图片切换 - 带标签
04-02
NULL 博文链接：https://julyzergcn.iteye.com/blog/1452188
图片切换的实现
mantou_riji的博客
04-08 670
简单的实现 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; } #outer{ width: 580px; margin: 50px
JavaScript实现超简单的图片切换效果
雷加祥的博客
04-27 1559
JavaScript实现超简单的图片切换效果
Jquery实现图片切换的三种方法
qq_42328196的博客
07-20 1万+
获取数字的背景颜色 ，切换图片的按钮的背景颜色和实现按钮图片替换。 function back(num){ $(".adver").css({"background":"url('images/adver0"+num+".jpg')"}) $("li").css({"background":"black&qu
JS图片切换
linqunbin的博客
05-24 1295
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
Android实现简单的图片切换
05-25
Android实现图片切换可以使用ImageView和Handler来实现。以下是一个简单的示例代码： 1. 在布局文件中添加ImageView： ``` <ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/image1" /> ``` 2. 在Activity中使用Handler来实现图片切换： ``` public class MainActivity extends AppCompatActivity { private ImageView imageView; private int[] imageArray = {R.drawable.image1, R.drawable.image2, R.drawable.image3}; private int currentIndex = 0; private Handler handler = new Handler(); private Runnable runnable = new Runnable() { @Override public void run() { currentIndex++; if (currentIndex >= imageArray.length) { currentIndex = 0; } imageView.setImageResource(imageArray[currentIndex]); handler.postDelayed(this, 2000); } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageView = findViewById(R.id.imageView); handler.postDelayed(runnable, 2000); } } ``` 在上面的示例代码中，我们使用了一个imageArray数组来存储要切换的图片资源，然后使用currentIndex变量来记录当前显示的图片的索引。每隔2秒钟会自动切换到下一张图片，直到所有图片都显示完毕后再从头开始循环。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值