演示图

引用css、js库

<script charset="utf-8" src="js/jquery%28mixNIE%29.1.11.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">

主要代码htnl

<div class="ts-box" id="ts" name="ts">
      <div class="gallery_container" style="width: 2800px; height: 436px;">
          <a href="javascript:openlink();" class="gallery_item gallery_active" style="margin-left: -280px; transition-duration: 500ms; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg);">
              <img src="img/psu13.jpeg" alt="游戏特色">
              <span></span>
          </a>
          <a href="javascript:openlink();" class="gallery_item gallery_right_middle" style="margin-left: -280px; transition-duration: 500ms; transform: translate3d(280px, 0px, -400px) rotateX(0deg) rotateY(-50deg);">
              <img src="img/psu1.jpeg" alt="游戏特色">
              <span></span>
          </a> 
          <a href="javascript:openlink();" class="gallery_item gallery_right_back" style="margin-left: -280px; transition-duration: 500ms; transform: translate3d(560px, 0px, -800px) rotateX(0deg) rotateY(-70deg);">
              <img src="img/psu14.jpeg" alt="游戏特色">
              <span></span>
          </a> 
          <a href="javascript:openlink();" class="gallery_item" style="margin-left: -280px; transition-duration: 500ms; transform: translate3d(0px, 0px, -3200px) rotateX(0deg) rotateY(0deg);">
              <img src="img/psu15.jpeg" alt="游戏特色">
              <span></span>
          </a> 
          <a href="javascript:openlink();" class="gallery_item" style="margin-left: -280px; transition-duration: 500ms; transform: translate3d(0px, 0px, -3200px) rotateX(0deg) rotateY(0deg);">
             <img src="img/psu16.jpeg" alt="游戏特色">
             <span></span>
          </a>
          <a href="javascript:openlink();" class="gallery_item" style="margin-left: -280px; transition-duration: 500ms; transform: translate3d(0px, 0px, -3200px) rotateX(0deg) rotateY(0deg);">
              <img src="img/psu5.jpeg" alt="游戏特色">
              <span></span>
          </a>
          <a href="javascript:openlink();" class="gallery_item" style="margin-left: -280px; transition-duration: 500ms; transform: translate3d(0px, 0px, -3200px) rotateX(0deg) rotateY(0deg);">
              <img src="img/psu6.jpeg" alt="游戏特色">
              <span></span>
          </a> 
          <a href="javascript:openlink();" class="gallery_item" style="margin-left: -280px; transition-duration: 500ms; transform: translate3d(0px, 0px, -3200px) rotateX(0deg) rotateY(0deg);">
              <img src="img/psu7.jpeg" alt="游戏特色">
              <span></span>
          </a> 
          <a href="javascript:openlink();" class="gallery_item gallery_left_back" style="margin-left: -280px; transition-duration: 500ms; transform: translate3d(-560px, 0px, -800px) rotateX(0deg) rotateY(70deg);">
              <img src="img/psu17.jpeg" alt="游戏特色">
              <span></span>
          </a> 
          <a href="javascript:openlink();" class="gallery_item gallery_left_middle" style="margin-left: -280px; transition-duration: 500ms; transform: translate3d(-280px, 0px, -400px) rotateX(0deg) rotateY(50deg);">
             <img src="img/psu9.jpeg" alt="游戏特色">
             <span></span>
          </a>

          </div>
            <a href="javascript:void(0);" class="gallery_prev">前</a>        
            <a href="javascript:void(0);" class="gallery_next">后</a>    
    </div>

嵌入js

<script src="js/Scene.js"></script>

如有文章资源下载链接失效可直接点击作者头像联系，也可联系小狐仙。 本文章为用户投稿内容，不代表小狐仙及本站的真实想法，内容真伪请自行辨别。