首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现图片3D轮播效果

Posted in Javascript onSeptember 21, 2019

3D的图片轮播效果很炫，写到这里只是为了不丢代码，不为别的。

效果预览：

js实现图片3D轮播效果

html代码：

<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:500px;margin:20px auto;}
#focus_Box ul{position:relative;width:710px;height:500px}
#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(../img/3D轮播效果/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(../img/3D轮播效果/btn.png) left bottom no-repeat;left:0px}
#focus_Box .next{background:url(../img/3D轮播效果/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/3D轮播效果/ZoomPic.js"></script>
<div id="focus_Box">
 <span class="prev"> </span>
 <span class="next"> </span>
 <ul>
 <li>
 <a href="#" ><img width="600" height="450" src="../img/3D轮播效果/cat1.jpg" /></a>
 
 </li>
 <li>
 <a href="#" ><img width="600" height="450" src="../img/3D轮播效果/cat2.jpg" /></a>
 
 </li>
 <li>
 <a href="#" ><img width="600" height="450" src="../img/3D轮播效果/cat3.jpg" /></a>
 
 </li>
 <li>
 <a href="#" ><img width="600" height="450" src="../img/3D轮播效果/cat4.jpg" /></a>
  
 </li>
 <li>
 <a href="#" ><img width="600" height="450" src="../img/3D轮播效果/cat5.jpg" /></a>
 
 </li>
 </ul>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

js代码：

function ZoomPic ()
{
 this.initialize.apply(this, arguments) 
}
ZoomPic.prototype = 
{
 initialize : function (id)
 {
 var _this = this;
 this.wrap = typeof id === "string" ? document.getElementById(id) : id;
 this.oUl = this.wrap.getElementsByTagName("ul")[0];
 this.aLi = this.wrap.getElementsByTagName("li");
 this.prev = this.wrap.getElementsByTagName("span")[0];
 this.next = this.wrap.getElementsByTagName("span")[1];
 this.timer = 1000;
 this.aSort = [];
 this.iCenter = 2;
 this._doPrev = function () {return _this.doPrev.apply(_this)};
 this._doNext = function () {return _this.doNext.apply(_this)};
 this.options = [
 /*{width:476, height:210, top:40, left:0, zIndex:1},
 {width:426, height:250, top:20, left:50, zIndex:2},
 {width:654, height:290, top:0, left:150, zIndex:3},
 {width:426, height:250, top:20, left:480, zIndex:2},
 {width:476, height:210, top:40, left:476, zIndex:1},*/
 {width:365, height:252, top:40, left:0, zIndex:1},
 {width:405, height:280, top:20, left:60, zIndex:2},
 {width:445, height:308, top:0, left:130, zIndex:3},
 {width:405, height:280, top:20, left:240, zIndex:2},
 {width:366, height:252, top:40, left:345, zIndex:1},
 ];
 for (var i = 0; i < this.aLi.length; i++) this.aSort[i] = this.aLi[i];
 this.aSort.unshift(this.aSort.pop());
 this.setUp();
 this.addEvent(this.prev, "click", this._doPrev);
 this.addEvent(this.next, "click", this._doNext);
 this.doImgClick(); 
 this.timer = setInterval(function ()
 {
 _this.doNext() 
 }, 3000); 
 this.wrap.onmouseover = function ()
 {
 clearInterval(_this.timer) 
 };
 this.wrap.onmouseout = function ()
 {
 _this.timer = setInterval(function ()
 {
 _this.doNext() 
 }, 3000); 
 }
 },
 doPrev : function ()
 {
 this.aSort.unshift(this.aSort.pop());
 this.setUp()
 },
 doNext : function ()
 {
 this.aSort.push(this.aSort.shift());
 this.setUp()
 },
 doImgClick : function ()
 {
 var _this = this;
 for (var i = 0; i < this.aSort.length; i++)
 {
 this.aSort[i].onclick = function ()
 {
 if (this.index > _this.iCenter)
 {
  for (var i = 0; i < this.index - _this.iCenter; i++) _this.aSort.push(_this.aSort.shift());
  _this.setUp()
 }
 else if(this.index < _this.iCenter)
 {
  for (var i = 0; i < _this.iCenter - this.index; i++) _this.aSort.unshift(_this.aSort.pop());
  _this.setUp()
 }
 }
 }
 },
 setUp : function ()
 {
 var _this = this;
 var i = 0;
 for (i = 0; i < this.aSort.length; i++) this.oUl.appendChild(this.aSort[i]);
 for (i = 0; i < this.aSort.length; i++)
 {
 this.aSort[i].index = i;
 if (i < 5)
 {
 this.css(this.aSort[i], "display", "block");
 this.doMove(this.aSort[i], this.options[i], function ()
 {
  _this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
  {
  _this.doMove(_this.aSort[_this.iCenter].getElementsByTagName("img")[0], {opacity:100}, function ()
  {
  _this.aSort[_this.iCenter].onmouseover = function ()
  {
  _this.doMove(this.getElementsByTagName("div")[0], {bottom:0})
  };
  _this.aSort[_this.iCenter].onmouseout = function ()
  {
  _this.doMove(this.getElementsByTagName("div")[0], {bottom:-100})
  }
  })
  })
 });
 }
 else
 {
 this.css(this.aSort[i], "display", "none");
 this.css(this.aSort[i], "width", 0);
 this.css(this.aSort[i], "height", 0);
 this.css(this.aSort[i], "top", 37);
 this.css(this.aSort[i], "left", this.oUl.offsetWidth / 2)
 }
 if (i < this.iCenter || i > this.iCenter)
 {
 this.css(this.aSort[i].getElementsByTagName("img")[0], "opacity", 100)
 this.aSort[i].onmouseover = function ()
 {
  _this.doMove(this.getElementsByTagName("img")[0], {opacity:100}) 
 };
 this.aSort[i].onmouseout = function ()
 {
  _this.doMove(this.getElementsByTagName("img")[0], {opacity:100})
 };
 this.aSort[i].onmouseout();
 }
 else
 {
 this.aSort[i].onmouseover = this.aSort[i].onmouseout = null
 }
 } 
 },
 addEvent : function (oElement, sEventType, fnHandler)
 {
 return oElement.addEventListener ? oElement.addEventListener(sEventType, fnHandler, false) : oElement.attachEvent("on" + sEventType, fnHandler)
 },
 css : function (oElement, attr, value)
 {
 if (arguments.length == 2)
 {
 return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr]
 }
 else if (arguments.length == 3)
 {
 switch (attr)
 {
 case "width":
 case "height":
 case "top":
 case "left":
 case "bottom":
  oElement.style[attr] = value + "px";
  break;
 case "opacity" :
  oElement.style.filter = "alpha(opacity=" + value + ")";
  oElement.style.opacity = value / 100;
  break;
 default :
  oElement.style[attr] = value;
  break
 } 
 }
 },
 doMove : function (oElement, oAttr, fnCallBack)
 {
 var _this = this;
 clearInterval(oElement.timer);
 oElement.timer = setInterval(function ()
 {
 var bStop = true;
 for (var property in oAttr)
 {
 var iCur = parseFloat(_this.css(oElement, property));
 property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100));
 var iSpeed = (oAttr[property] - iCur) / 5;
 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
 
 if (iCur != oAttr[property])
 {
  bStop = false;
  _this.css(oElement, property, iCur + iSpeed)
 }
 }
 if (bStop)
 {
 clearInterval(oElement.timer);
 fnCallBack && fnCallBack.apply(_this, arguments) 
 }
 }, 30)
 }
};
window.onload = function ()
{
 new ZoomPic("focus_Box");
};

收藏一下。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现图片3D轮播效果

- Author -

何处锦绣不灰堆

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
原生js编写焦点图效果
Dec 08 Javascript
JavaScript实现音乐自动切换和轮播
Nov 05 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 #Javascript
原生js实现3D轮播图
Mar 21 #Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 #Javascript
关于layui flow loading占位图的实现方法
Sep 21 #Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 #Javascript
微信小程序实现3D轮播图效果（非swiper组件）
Sep 21 #Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 #Javascript
幻读(5) innoDB(3) 经纬度(1) 事务并发(1) MVCC(4) 复读(1) 间隙锁(2) DBLink(1) IIS7(1) GZIP(2)
You might like
PHP添加Xdebug扩展的方法
2014/02/12 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
php实现socket推送技术的示例
2017/12/20 PHP
玩转jQuery按钮 请告诉我你最喜欢哪些？
2012/01/08 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
Python中的urllib模块使用详解
2015/07/07 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
Nike英国官网：Nike.com (UK)
2017/02/13 全球购物
美津浓美国官网：Mizuno美国
2018/08/07 全球购物
新加坡最佳婴儿用品店：Mamahood.com.sg
2018/08/26 全球购物
瑞典网上购买现代和复古家具：Reforma
2019/10/21 全球购物
双语教学实施方案
2014/03/23 职场文书
企业消防安全责任书
2014/07/23 职场文书
授权委托书样本
2014/09/25 职场文书
新闻稿标题
2015/07/18 职场文书
门卫管理制度范本
2015/08/05 职场文书
python必学知识之文件操作（建议收藏）
2021/05/30 Python
vue elementUI表格控制对应列
2022/04/13 Vue.js