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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
简单实现兼容各大浏览器的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实现购物车功能(上)
2020/07/23 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Django保护敏感信息的方法示例
2019/05/09 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
幼儿园毕业教师感言
2014/02/21 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
课例研修方案
2014/05/31 职场文书
节约用电标语
2014/06/17 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
售房委托书
2014/08/30 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
机动车交通事故协议书
2015/01/29 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
创业计划书之花店
2019/09/20 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
MySQL派生表联表查询实战过程
2022/03/20 MySQL