js实现3D图片逐张轮播幻灯片特效代码分享


Posted in Javascript onSeptember 09, 2015

本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效。分享给大家供大家参考。具体如下:
这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单。
运行效果图:-------------------查看效果 下载源码-------------------

js实现3D图片逐张轮播幻灯片特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的js实现3D图片逐张轮播幻灯片特效代码如下

<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="https://3water.com/"><img width="445" height="308" alt="这个时代 你所追求的是什么?" src="images/1.jpg" /></a>
  <p>
  <span>这个时代 你所追求的是什么?</span>
  <a href="https://3water.com/" class="imgs-scroll-btn">分享</a>
  </p>
 </li>
 <li>
  <a href="https://3water.com/"><img width="445" height="308" alt="我们所追求的不是拥有一切,而是拥有值得的一切" src="images/2.jpg" /></a>
  <p>
  <span>我们所追求的不是拥有一切,而是拥有值得的一切</span>
  <a href="https://3water.com/" class="imgs-scroll-btn">分享</a>
  </p>
 </li>
 <li>
  <a href="https://3water.com/"><img width="445" height="308" alt="一段旅程,两个城市,潮流正在被重塑" src="images/3.jpg" /></a>
  <p>
  <span>一段旅程,两个城市,潮流正在被重塑</span>
  <a href="https://3water.com/" class="imgs-scroll-btn">分享</a>
  </p>
 </li>
 <li>
  <a href="https://3water.com/"><img width="445" height="308" alt="你的眼光、激情、创意和内涵,也在重塑着城市的潮流" src="images/4.jpg" /></a>
  <p>
  <span>你的眼光、激情、创意和内涵,也在重塑着城市的潮流</span>
  <a href="https://3water.com/" class="imgs-scroll-btn">分享</a>
  </p>
 </li>
 <li>
  <a href="https://3water.com/"><img width="445" height="308" alt="在这里,抛开重重限制,释放真实自我" src="images/5.jpg" /></a>
  <p>
  <span>在这里,抛开重重限制,释放真实自我</span>
  <a href="https://3water.com/" class="imgs-scroll-btn">分享</a>
  </p>
 </li>
 </ul>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

以上就是为大家分享的js实现3D图片逐张轮播幻灯片特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
详解vue-cli3使用
Aug 14 Javascript
js实现烟花特效
Mar 02 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 #Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 #Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 #Javascript
JS实现自动变换的菜单效果代码
Sep 09 #Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 #Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 #Javascript
使用impress.js制作幻灯片
Sep 09 #Javascript
You might like
PHP新手上路(十四)
2006/10/09 PHP
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
python条件和循环的使用方法
2013/11/01 Python
python提示No module named images的解决方法
2014/09/29 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
python简易远程控制单线程版
2018/06/20 Python
python实现贪吃蛇小游戏
2020/03/21 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Python运算符+与+=的方法实例
2021/02/18 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
优秀体育委员自荐书
2014/01/31 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
宣传工作经验材料
2014/06/02 职场文书
夏季药店促销方案
2014/08/22 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android