js使用图片加载技术实现图片切换

最新推荐文章于 2022-11-18 15:18:55 发布

还不起来学习？

最新推荐文章于 2022-11-18 15:18:55 发布

阅读量238

点赞数

分类专栏： vue、JQuery 文章标签： js

本文链接：https://blog.csdn.net/m0_46211448/article/details/111226678

版权

vue、JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js使用图片加载技术实现图片切换

1.功能实现
点击“上一张”按钮，切换上一张图片，点击“下一张”按钮，切换至下一张，到达图片末尾会弹出相应提示框，通过Image对象来预加载图片。

2.代码如下


<!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">
    <title>图片切换</title>
  </head>
  <body>
 <img src="img/1.jpg" id="img1" style="width: 200px;height: 200;">
 <br>
  <input type="button" value="上一张" onclick="change(0);">  
  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;
  <input type="button" value="下一张" onclick="change(1);"> 
  </body>

  <script>
    //图片预加载技术，缓冲四张图片
    var imgObj1 = new Image();
    imgObj1.src = "/img/1.jpg";
    var imgObj2 = new Image();
    imgObj2.src = "/img/2.jpg";
    var imgObj3 = new Image();
    imgObj3.src = "/img/3.jpg";
    var imgObj4 = new Image();
    imgObj4.src = "/img/4.jpg";
    var i = 2;
    //将缓冲对象放入数组
    var imgArr=[imgObj1,imgObj2,imgObj3,imgObj4];
    //点击触发事件
    function change(num){
     if (i==1&&num==0){
       alert('当前为第一张图片');
       return;//返回
     }else if(i==4&&num==1){
      alert('当前为最后一张图片');
      return;
     }
     if(num==0){//上一张，i--
       i--;
     }else{//下一张，i++
       i++;
     }
     document.getElementById("img1").src=imgArr[i - 1].src;//显示相应图片
    }
  </script>
</html>