演示图

引用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" rel="external nofollow" >

主要代码html

<div class="ts-box" id="ts" name="ts">
      <div class="gallery_container" style="width: 2800px; height: 436px;">
          <a href="javascript:openlink();" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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();" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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();" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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();" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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();" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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();" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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();" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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();" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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();" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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();" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  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);" rel="external nofollow"  rel="external nofollow"  class="gallery_prev">前</a>        
            <a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  class="gallery_next">后</a>    
    </div>