Js简单自动轮播图代码

2022-06-19 0 1,195

演示图

Js简单自动轮播图代码

引用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>

嵌入js

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

声明:本站所有资源仅供学习和研究传播,大家请在下载后24小时内删除,一切关于该资源商业行为与念破网(https://www.nianpo.com)无关。 请勿将该资源进行商业交易、转载等行为,该资源只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。 (若您进入本站就表示同意以上条款)若本资源侵犯了您的权益,请联系我们予以删除!(E-mail:765934@qq.com) 会员QQ群:5676140

念破网 网络教程 Js简单自动轮播图代码 https://www.nianpo.com/449.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务