Javascript特效：图片切换

最新推荐文章于 2021-06-07 21:33:16 发布

KaiSarH

最新推荐文章于 2021-06-07 21:33:16 发布

阅读量380

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/KaiSarH/article/details/103640158

版权

JS 专栏收录该内容

118 篇文章 2 订阅

订阅专栏

知识点：

window.onload网页全部加载完后再执行
获取元素设置属性
临界情况判断

运行效果：

在这里插入图片描述

点击上一张下一章切换图片

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #box{
        width: 1200px;
        margin: 0 auto;
    }
</style>
<body>
    <div id="box">
        <img id="icon" src="images/阿鲁1.gif" alt="">
        <p></p>
        <button id="prep">上一张</button>
        <button id="next">下一张</button>
    </div>
<script>
    window.onload = function (ev) {
        // 1. 获取标签
        var prep = document.getElementById('prep');
        var next = document.getElementById('next');
        var icon = document.getElementById('icon');
        // 2. 点击
        var currentIndex = 1, minIndex=1, maxIndex=10;
        prep.onclick = function (ev1) {
            if (currentIndex === minIndex){
                currentIndex = maxIndex;
            }else{
                currentIndex--;
            }
            icon.setAttribute('src','images/阿鲁'+ currentIndex +'.gif');
        };
        next.onclick = function (ev1) {
            if (currentIndex === maxIndex){
                currentIndex = minIndex;
            }else {
                currentIndex++;
            }
            icon.setAttribute('src','images/阿鲁'+ currentIndex +'.gif');
        }
    }
</script>
</body>
</html>

KaiSarH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Javascript特效：图片切换

运行效果：点击上一张下一章切换图片代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> #box{ w...
复制链接

扫一扫