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 相关文章推荐
javascript 网页跳转的方法
Dec 24 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
前端JavaScript大管家 package.json
Nov 02 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
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
Python ljust rjust center输出
2008/09/06 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
美国Max仓库:Max Warehouse
2020/05/31 全球购物
养殖项目策划书范文
2014/01/13 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
洗发水广告词
2014/03/13 职场文书
结对共建协议书
2014/08/20 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
汽车销售员岗位职责
2015/04/11 职场文书