学到了一个旋转的魔方图片

通过点击不同的按钮实现魔方的旋转来展示自己想要在暂时的图片 html布局如下,就是展示需要展示的图片 `

<div class="square">
    <ul class="s-img">
        <li><img src="../images/pic.png"></li>
        <li><img src="../images/pic2.png"></li>
        <li><img src="../images/pic3.png"></li>
        <li><img src="../images/pic4.png"></li>
        <li><img src="../images/pic2.png"></li>
        <li><img src="../images/pic3.png"></li>
    </ul>
</div>
<!-- 手动点击旋转 -->
<div class="toc">
    <span class="img_1"></span>
    <span class="img_2"></span>
    <span class="img_3"></span>
    <span class="img_4"></span>
    <span class="img_5"></span>
    <span class="img_6"></span>
</div>

` 使用CSS布局,将图片围成一个立方体,每张图片放置指定位置 css布局部分如下:

window.onload = function(){
  //toc目录设置
  var toc_img = document.querySelector('.toc');
  var square = document.querySelector('ul');
  var p_img = square.classList;
  var img_button = toc_img.querySelectorAll('span');
  var flage = '';
  // 每个板块添加点击事件
  img_button[0].onclick = function(e) {
      flage = img_button[0].className;
      square.setAttribute('class', flage);
  }
  img_button[1].onclick = function(e) {
      flage = img_button[1].className;
      square.setAttribute('class', flage);
  }
  img_button[2].onclick = function(e) {
      flage = img_button[2].className;
      square.setAttribute('class', flage);
  }
  img_button[3].onclick = function(e) {
      flage = img_button[3].className;
      square.setAttribute('class', flage);
  }
  img_button[4].onclick = function(e) {
      flage = img_button[4].className;
      square.setAttribute('class', flage);
  }
  img_button[5].onclick = function(e) {
      flage = img_button[5].className;
      square.setAttribute('class',flage);
  }
}

然后使用JS添加事件,实现旋转jS 布局:

window.onload = function(){
  //toc目录设置
  var toc_img = document.querySelector('.toc');
  var square = document.querySelector('ul');
  var p_img = square.classList;
  var img_button = toc_img.querySelectorAll('span');
  var flage = '';
  // 每个板块添加点击事件
  img_button[0].onclick = function(e) {
      flage = img_button[0].className;
      square.setAttribute('class', flage);
  }
  img_button[1].onclick = function(e) {
      flage = img_button[1].className;
      square.setAttribute('class', flage);
  }
  img_button[2].onclick = function(e) {
      flage = img_button[2].className;
      square.setAttribute('class', flage);
  }
  img_button[3].onclick = function(e) {
      flage = img_button[3].className;
      square.setAttribute('class', flage);
  }
  img_button[4].onclick = function(e) {
      flage = img_button[4].className;
      square.setAttribute('class', flage);
  }
  img_button[5].onclick = function(e) {
      flage = img_button[5].className;
      square.setAttribute('class',flage);
  }
}