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中Array 对象相关的几个方法
Dec 22 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
Python制作简单的网页爬虫
2015/11/22 Python
python绘制条形图方法代码详解
2017/12/19 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
python 常见的排序算法实现汇总
2020/08/21 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
中专毕业生自我鉴定
2013/11/21 职场文书
加工操作管理制度
2014/01/19 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
成绩报告单家长评语
2014/12/30 职场文书
主婚人致辞精选
2015/07/28 职场文书
vue实现登陆页面开发实践
2022/05/30 Vue.js
Nginx跨域问题解析与解决
2022/08/05 Servers