JavaScript伪3D轮播图片幻灯切换代码

发布时间：2018-08-23 16:04:37 所属栏目：编程来源：站长网

导读：烈79火77网(LieHuo77.Net)教07程 Java Script伪3D轮播图片幻灯切换代码，IE6下表现不尽完美，其它浏览器倒没什么大碍。对于IE6看到的斑点，我只能表示很无奈。。。本从水平至此，期待交流~ 演示效果： htmlheadtitleJavaScript伪3D轮播图片幻灯切换代码/ti

　　烈79火77网(LieHuo77.Net)教07程 JavaScript伪3D轮播图片幻灯切换代码，IE6下表现不尽完美，其它浏览器倒没什么大碍。对于IE6看到的斑点，我只能表示很无奈。。。本从水平至此，期待交流~

　　演示效果：

<html> <head> <title>JavaScript伪3D轮播图片幻灯切换代码</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <style> html {background:#000} body, ul {margin:0;padding:0} li {list-style:none} img {border:none;display:block} .slide-wp { width: 500px; height: 300px; overflow: hidden; position: absolute; left: 50%; top: 50%; margin-left: -250px; margin-top: -150px; } .nav-wp { position: absolute; background: #ccc; top: 50%; margin-top: 170px; left: 50%; margin-left: -100px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0 20px 6px 10px; _padding: 0 20px 2px 10px; } .nav li { float: left; margin-left: 10px; font-size: 20px; font-weight: bold; font-family: tahoma; color: #22739e; cursor: pointer; height: 22px; } .nav li.cur{color: #ff7a00} .next { position:absolute; top: 0; left: 160px; padding: 4px 8px; color: #ff7a00; background: #ccc; height: 20px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; cursor: pointer; } </style> </head> <body> <h2 style="color:#fff">对于使用IE6的同学看到的斑点，我只能表示很无奈。。。</h2> <div id="slider" class="slide-wp"> <ul> <li><a href="/" target="_blank"><img src="http://www.veryhuo.com/uploads/common/images/p1.jpg" alt="" /></a></li> <li><a href="/" target="_blank"><img src="http://www.veryhuo.com/uploads/common/images/p2.jpg" alt="" /></a></li> <li><a href="/" target="_blank"><img src="http://www.veryhuo.com/uploads/common/images/p3.jpg" alt="" /></a></li> <li><a href="/" target="_blank"><img src="http://www.veryhuo.com/uploads/common/images/p4.jpg" alt="" /></a></li> <li><a href="/" target="_blank"><img src="http://www.veryhuo.com/uploads/common/images/p5.jpg" alt="" /></a></li> </ul> </div> <div class="nav-wp"> <ul id="nav" class="nav"> <li onclick="mySlider.pos(0)">●</li> <li onclick="mySlider.pos(1)">●</li> <li onclick="mySlider.pos(2)">●</li> <li onclick="mySlider.pos(3)">●</li> <li onclick="mySlider.pos(4)">●</li> </ul> <a class="next" onclick="mySlider.move()">next</a> </div> <script type="text/javascript"> var HR = { $ : function(i) {return document.getElementById(i)}, $$ : function(c, p) {return p.getElementsByTagName(c)}, ce : function(i, t) { var o = document.createElement(i); t.appendChild(o); return o; } }; HR.slider3D = function () { var init = function (o) { this.o = o; var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR.$$('li', ul); this.l = li.length; this.w = wp.offsetWidth; this.h = wp.offsetHeight; this.at = o.auto? o.auto : 4; var con = this.con = HR.ce('div', wp); con.style.cssText = 'position:absolute;left:0;top:0;width:'+this.w+'px;height:'+this.h+'px'; ul.style['display'] = 'none'; this.a1 = HR.ce('a', con); this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden'; this.a2 = HR.ce('a', con); this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden'; this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />'; this.img = HR.$$('img', ul); this.s = o.maskSize ? o.maskSize : 5; this.mask11 = HR.ce('span', this.a1); this.mask12 = HR.ce('span', this.a1); this.mask21 = HR.ce('span', this.a2); this.mask22 = HR.ce('span', this.a2); this.pos(0); } init.prototype = { pos : function (i) { clearInterval(this.li[i].a); clearInterval(this.au); this.au = 0; this.cur = i; var navli = HR.$$('li', HR.$(this.o.navId)); for (var j=0; j<navli.length; j++) { navli[j].className = i == j ? 'cur' : ''; } var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img', this.a2)[0], _this = this; img1.src = i==0 ? this.img[this.l-1].src : this.img[i-1].src; img1.width = this.w; img2.src = this.img[i].src; img2.width = 0; img1.height = img2.height = this.h; this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 '+this.w/2+'px'; this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 '+this.w/2+'px'; this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px'; this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px'; this.li[i].a = setInterval(function(){_this.anim(i)}, 20); }, anim : function (i) { var w1 = HR.$$('img', this.a1)[0].width, w2 = HR.$$('img', this.a2)[0].width; if (w2 == this.w) { clearInterval(this.li[i].a); HR.$$('img', this.a1)[0].width = 0; HR.$$('img', this.a2)[0].width = this.w; this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px'; this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h/this.s + 'px'; this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w/2 + 'px'; this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px'; }else { HR.$$('img', this.a1)[0].width -= Math.ceil((this.w-w2)*.13); HR.$$('img', this.a2)[0].width += Math.ceil((this.w-w2)*.13); this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR.$$('img', this.a1)[0].width/2 + 'px'; this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px'; this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR.$$('img', this.a2)[0].width/2 + 'px'; this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h/this.s - HR.$$('img', this.a2)[0].width*this.h/(this.s*this.w) + 'px'; if (!this.au) this.auto(); } }, auto : function () { var _this = this; this.au = setInterval(function(){_this.move()}, this.at*1000); }, move : function () { var n = this.cur==this.l-1 ? 0 : this.cur+1; this.pos(n); } } return init; }(); var mySlider = new HR.slider3D({ id: 'slider', maskSize: 6, navId: 'nav', auto: 4 })</script></body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

把not in 更换成not e	mydumper工具运用介绍
别花冤枉钱买专栏了！	Mysql索引类型创建错误