图片案例-JavaScript

1.css部分先复制过去不用太刻意去打,毕竟我要讲的这篇文章是JavaScript部分的看后面的就好,看个人.

下面这是style部分的代码.

    body {
      font-family: "Helvetica", "Arial", serif;
      color: #333;
      background-color: #ccc;
      margin: 1em 10%;
    }

    h1 {
      color: #333;
      background-color: transparent;
    }

    a {
      color: #c60;
      background-color: transparent;
      font-weight: bold;
      text-decoration: none;
    }

    ul {
      padding: 0;
    }

    li {
      float: left;
      padding: 1em;
      list-style: none;
    }

    #imagegallery {

      list-style: none;
    }
  

    #imagegallery li {
      margin: 0px 20px 20px 0px;
      padding: 0px;
      display: inline;
    }

    #imagegallery li a img {
      border: 0;
    }

这下面呢是body部分的代码

<ul id="imagegallery">
  <li><a href="#" title="team7" id="a">
    <img src="./1920×1080/team7.jpg" width="100" alt="team7"/>

  </a></li>
  <li><a href="#" title="BORUTO" id="b">
    <img src="./1920×1080/BORUTO.jpg" width="100" alt="BORUTO"/>
  </a></li>
  <li><a href="#" title="永续之约" id="c">
    <img src="./1920×1080/永续之约 yidaiq.jpeg" width="100" alt="永续之约"/>
  </a></li>
  <li><a href="#" title="阴阳封印" id="d">
    <img src="./1920×1080/阴阳封印.jpg" width="100" alt="阴阳封印"/>
  </a></li>
</ul> 

<div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p> 

1. 开始我们的JavaScript部分(1).第一步呢,先获取到我们的点击图片的案例的id,大图片的id,还有显示图片名字的id,三个都要获取到.

var dv = document.getElementById("des");
var img = document.getElementById("image");
var li = document.getElementById("imagegallery").getElementsByTagName("li");

1. 获取完id后就开始做点击事件了,用获取到的小图片点击按钮的id然后用数组的方式把他们获取到,然后再用函数包裹起来,最后就是点击的效果了.

 li[0].onclick = function(){
      img.src = "./1920×1080/team7.jpg"
      dv.innerHTML = "team7"
    }   
     li[1].onclick = function(){
      img.src = "./1920×1080/BORUTO.jpg"
      dv.innerHTML = "BORUTO"
    }    
    li[2].onclick = function(){
      img.src = "./1920×1080/永续之约 yidaiq.jpeg"
      dv.innerHTML = "永续之约"
    }    
    li[3].onclick = function(){
      img.src = "./1920×1080/阴阳封印.jpg"
      dv.innerHTML = "阴阳封印"
    }

里面的点击效果用img.src就可以放进去你点击图片按钮相对于的图片了,还有要注意的是你们注意看a标签超链接href那里我把里面的值设置为#,切记不能为空不然效果就只会一闪而过了

效果图: