search

Home >Web Front-end >JS Tutorial >js implements 3D picture carousel slideshow special effects code sharing_javascript skills

js implements 3D picture carousel slideshow special effects code sharing_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:39:541630browse

The example in this article describes the implementation of 3D image carousel slideshow effects using JavaScript. Share it with everyone for your reference. The details are as follows:
This is a special effect code based on JavaScript that implements a 3D picture carousel slideshow one by one. The implementation process is very simple.
Operation rendering: -------------------View the effect Download the source code---------- --------

Tips: If the browser does not work properly, you can try switching the browsing mode.
The code to implement the 3D picture carousel slideshow special effects code for everyone to share is as follows 

<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 implements 3D picture carousel slideshow special effects code sharing_javascript skills" src="images/2.jpg" /></a>
  <p>
  <span>js implements 3D picture carousel slideshow special effects code sharing_javascript skills</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>

The above is the js code shared with you to realize the special effects of 3D picture carousel slideshow one by one. I hope you can like it and apply it in practice.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript implements base64 md5 sha1 password encryption_javascript skillsNext article：JavaScript implements base64 md5 sha1 password encryption_javascript skills

Related articles

See more