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");
};

收藏一下。

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

Javascript 相关文章推荐
js获取变量
Aug 24 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
babel基本使用详解
Feb 17 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
微信小程序列表中item左滑删除功能
Nov 07 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
javascript实现多边形碰撞检测
Oct 24 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
You might like
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
js变量以及其作用域详解
2020/07/18 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
python字符串对其居中显示的方法
2015/07/11 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
pygame实现弹球游戏
2020/04/14 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Python字典dict常用方法函数实例
2020/11/09 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
医院后勤自我鉴定
2013/10/13 职场文书
美术专业个人自我评价
2014/01/18 职场文书
护士毕业实习感言
2014/03/05 职场文书
安全横幅标语
2014/06/09 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
公积金贷款承诺书
2015/04/30 职场文书
音乐研修感悟
2015/11/18 职场文书
2019思想汇报范文
2019/05/21 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
mysql数据库入门第一步之创建表
2021/05/14 MySQL
python单向链表实例详解
2022/05/25 Python