• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

javascript实现点击按钮切换图片

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了javascript实现点击按钮切换图片的具体代码,供大家参考,具体内容如下

效果图:

首先搭建基本的结构

<div id="div">
        <p id="desc"></p>
        <!--默认显示第一张图片-->
        <img src="img/1.jpg" alt="加载失败" style="width: 800px;height: 400px;">
        <button id="pre">上一张</button>
        <button id="next">下一张</button>
</div>

其次设置显示的样式

<style>
        * {
            margin: 0;
            padding: 0;
        }
    
        #div {
            width: 800px;
            height: 420px;
            margin: 20px auto;
            background-color: rgb(243, 119, 36);
            text-align: center;
        }
    
        button:hover {
            cursor: pointer;
        }
</style>

最重要的JavaScript部分

<script>
        //预加载,等页面加载完毕后,再执行脚本
        window.onload = function () {
         
            var num = document.getElementsByTagName("img")[0];
            //这里虽然只有一个img标签,但是num变量的结果依然是一个数组
            
            //定义图像地址
            var shuzu = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg", "img/10.jpg", "img/11.jpg", "img/12.jpg"];

            //获取按钮
            var prev = document.getElementById("pre");
            var next = document.getElementById("next");
            var index = 0;
            
            //图片描述
            var p_desc = document.getElementById("desc");
            p_desc.innerHTML = "一共" + shuzu.length + "张图片" + ",当前是第" + (index + 1) + "张";
            //注意此处前面是字符串的拼接,实现加法需要用到括号
            
            //点击切换图片
            prev.onclick = function () {
                index--;
                //此处让它循环
                if (index < 0)
                    index = shuzu.length - 1;
                num.src = shuzu[index];
                p_desc.innerHTML = "一共" + shuzu.length + "张图片" + ",当前是第" + (index + 1) + "张";//注意此处前面是字符串的拼接,实现加法需要用到括号
            }

            next.onclick = function () {
                index++;
                if (index > shuzu.length - 1)
                    index = 0;
                num.src = shuzu[index];
                p_desc.innerHTML = "一共" + shuzu.length + "张图片" + ",当前是第" + (index + 1) + "张";//注意此处前面是字符串的拼接,实现加法需要用到括号
            }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
浏览器中视频播放器实现的基本思路与代码发布时间:2022-02-05
下一篇:
用JavaScript实现轮播图效果发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap