JS练习 - 切换图片

最新推荐文章于 2024-06-03 00:06:03 发布

逸川先生

最新推荐文章于 2024-06-03 00:06:03 发布

阅读量434

点赞数

分类专栏： JS学习笔记文章标签： JS 练习

本文链接：https://blog.csdn.net/qq_38238041/article/details/86775717

版权

JS学习笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

功能简单，仅作新手练习，先上个图

HTML代码如下：

1.引入css和js

2.写几个必要的标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS练习之切换图片</title>
  <link rel="stylesheet" href="style.css">
  <script src="js.js" ></script>
</head>
<body>
    <p></p>
    <img id="img" src="../img/1.jpg">
    <div>
      <span id="pre">上一张</span>
      <span id="next">下一张</span>
    </div>
</body>
</html>

JS代码如下：

1.浏览器加载代码是从上到下的，所以使用window.onload等标签加载完了在绑定事件

2.初始化参数

3.绑定点击上一张和下一张按钮事件，第一张的时候点击上一张就到最后一张，最后一张同理

window.onload = function() {
  var p = document.getElementsByTagName('p')[0];
  var imgs = ['../img/1.jpg','../img/2.jpg','../img/3.jpg','../img/4.jpg','../img/5.jpg'];

  var cur = 0;
  p.innerHTML = "当前是第"+(cur+1)+"张, 共有"+imgs.length+"张照骗";
  document.getElementById('pre').onclick = function() {
    document.getElementById('img').src = imgs[cur = (cur-1)<0 ? imgs.length-1 : cur-1];
    p.innerHTML = "当前是第"+(cur+1)+"张, 共有"+imgs.length+"张照骗";
  };
  document.getElementById('next').onclick = function () {
    document.getElementById('img').src = imgs[cur = (cur+1)===imgs.length ? 0 : cur+1];
    p.innerHTML = "当前是第"+(cur+1)+"张, 共有"+imgs.length+"张照骗";
  };
};

CSS代码如下：

1.没有使用button，个人比较喜欢使用span来制作按钮

*{
  margin: 0;
  padding: 0;
}
img{
  width: 500px;
}
p, img, div{
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
}
body{
  background-color: lightblue;
}
span{
  border: 1px solid darkolivegreen;
  margin: 10px;
  padding: 3px 8px;
}
span:hover{
  cursor: pointer;
}
p{
  margin: 10px auto;
}

逸川先生

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS练习 - 切换图片

功能简单，仅作新手练习，先上个图HTML代码如下：1.引入css和js2.写几个必要的标签&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;JS练习之切换图片&lt;/title&gt; &a
复制链接

扫一扫

专栏目录