首页
所有分类
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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
Jquery Ajax学习实例6 向WebService发出请求，返回DataSet(XML) 异步调用
Mar 18 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
js实现网页定位导航功能
Mar 07 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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
相对定位(1) 索引树扫描(1) ref(1) geoserver(1) 全表扫描(1) postcss-px2rem(1) 绝对定位(1) props(1) lua(3) 匹配(1)
You might like
PHP二维数组的去重问题解析
2011/07/17 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
浅析php原型模式
2014/11/25 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
网页设计常用的一些技巧
2006/12/22 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
Python调用命令行进度条的方法
2015/05/05 Python
详解Python Socket网络编程
2016/01/05 Python
python线程中同步锁详解
2018/04/27 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
关于礼仪的演讲稿
2014/01/04 职场文书
服务承诺书怎么写
2014/05/24 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
亮剑精神观后感
2015/06/05 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python