js implémente les compétences de partage de code d'effets spéciaux de diaporama de carrousel d'images 3D-js tutoriel-php.cn

js implémente les compétences de partage de code d'effets spéciaux de diaporama de carrousel d'images 3D

WBOY

Libérer： 2016-05-16 15:39:54

original

1615 Les gens l'ont consulté

L'exemple de cet article décrit la mise en œuvre d'effets de diaporama de carrousel d'images 3D à l'aide de JavaScript. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un code d'effets spéciaux basé sur JavaScript qui implémente un diaporama carrousel d'images 3D un par un. Le processus de mise en œuvre est très simple.
Opération de rendu : -------------------Voir l'effet Télécharger le code source-------------- --------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Le code pour implémenter le code des effets spéciaux du diaporama du carrousel d'images 3D que tout le monde peut partager est le suivant

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现3D图片逐张轮播幻灯片</title>
</head>

<body>
<style>
ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;}
ul#bcty365_nav li{float:left; display:inline; margin:10px;}
ul#bcty365_nav li a{display:block;color:#000000; font-size:16px;}
ul#bcty365_nav li a,#wimoban_p,#wimoban_p a{ font-family:"微软雅黑";}
ul#bcty365_nav li a:hover,#wimoban_p a:hover{color:red;}
</style> 
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"新宋体";}
/* focus_Box */
#focus_Box{position:relative;width:710px;height:308px;margin:20px auto;}
#focus_Box ul{position:relative;width:710px;height:308px}
#focus_Box li{z-index:0;position:absolute; width:0px;background:#787878;height:0px;top:146px;cursor:pointer;left:377px;border-radius:4px;box-shadow:1px 1px 12px rgba(200, 200, 200, 1)}
#focus_Box li img{width:100%;background:url(images/loading.gif) no-repeat center 50%;height:100%;vertical-align:top}
#focus_Box li p{position:absolute;left:0;bottom:0px;width:100%;height:40px;line-height:40px;background:url(images/float-bg.png) repeat;text-indent:8px;color:#fff;}
#focus_Box li p span{display:inline-block;width:70%;height:40px;overflow:hidden;}
#focus_Box .prev,#focus_Box .next{display:block;z-index:100;overflow:hidden;cursor:pointer;position:absolute;width:52px;height:52px;top:131px;}
#focus_Box .prev{background:url(images/btn.png) left bottom no-repeat;left:0px}
#focus_Box .next{background:url(images/btn.png) right bottom no-repeat;right:0px} 
#focus_Box .prev:hover{background-position:left top;}
#focus_Box .next:hover{background-position:right top;}
#focus_Box a.imgs-scroll-btn{display:block;position:absolute;z-index:110;top:7px;right:15px;width:51px;height:23px;overflow:hidden;background:url(images/share-btn.png) no-repeat;text-indent:-999px;}
</style>

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


<div id="focus_Box">
 <span class="prev"> </span>
 <span class="next"> </span>
 <ul>
 <li>
  <a href="http://www.jb51.net/"><img    style="max-width:90%"  style="max-width:90%" alt="这个时代 你所追求的是什么？" src="images/1.jpg" /></a>
  <p>
  <span>这个时代 你所追求的是什么？</span>
  <a href="http://www.jb51.net/" class="imgs-scroll-btn">分享</a>
  </p>
 </li>
 <li>
  <a href="http://www.jb51.net/"><img    style="max-width:90%"  style="max-width:90%" alt="js implémente les compétences de partage de code deffets spéciaux de diaporama de carrousel dimages 3D" src="images/2.jpg" /></a>
  <p>
  <span>js implémente les compétences de partage de code deffets spéciaux de diaporama de carrousel dimages 3D</span>
  <a href="http://www.jb51.net/" class="imgs-scroll-btn">分享</a>
  </p>
 </li>
 <li>
  <a href="http://www.jb51.net/"><img    style="max-width:90%"  style="max-width:90%" alt="一段旅程，两个城市，潮流正在被重塑" src="images/3.jpg" /></a>
  <p>
  <span>一段旅程，两个城市，潮流正在被重塑</span>
  <a href="http://www.jb51.net/" class="imgs-scroll-btn">分享</a>
  </p>
 </li>
 <li>
  <a href="http://www.jb51.net/"><img    style="max-width:90%"  style="max-width:90%" alt="你的眼光、激情、创意和内涵，也在重塑着城市的潮流" src="images/4.jpg" /></a>
  <p>
  <span>你的眼光、激情、创意和内涵，也在重塑着城市的潮流</span>
  <a href="http://www.jb51.net/" class="imgs-scroll-btn">分享</a>
  </p>
 </li>
 <li>
  <a href="http://www.jb51.net/"><img    style="max-width:90%"  style="max-width:90%" alt="在这里，抛开重重限制，释放真实自我" src="images/5.jpg" /></a>
  <p>
  <span>在这里，抛开重重限制，释放真实自我</span>
  <a href="http://www.jb51.net/" class="imgs-scroll-btn">分享</a>
  </p>
 </li>
 </ul>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

Copier après la connexion

Ce qui précède est le code js partagé avec vous pour réaliser les effets spéciaux du diaporama carrousel d'images 3D un par un. J'espère que vous pourrez l'aimer et l'appliquer dans la pratique.