2022年淘宝网图片切换幻 .pdf

《2022年淘宝网图片切换幻 .pdf》由会员分享，可在线阅读，更多相关《2022年淘宝网图片切换幻 .pdf（14页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、淘宝网 4 种 JS 图片切换幻灯焦点图代码 焦点图 body margin:0px;padding:0px;background:url(/jscss/demoimg/201109/bg.jpg); ul, li margin:0px;padding:0px;float:left;list-style-type:none; .frame width:1010px;height:auto;overflow:hidden;margin:40px auto 0 auto; .box width:490px;height:170px;padding:1px;float:left;display:in

2、line;margin:5px;background:#fff;position:relative;border:1px solid #dedede; .list width:490px;height:170px;float:left;overflow:hidden; position:relative; .list ul position:absolute;top:0px;left:0px; .list li width:490px;height:170px;float:left; .list li.opacity position:absolute;top:0px;left:0px;opa

3、city:0;filter:alpha(opacity:0) 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 14 页 - - - - - - - - - .but width:105px;height:16px;right:1px;bottom:5px;position:absolute;z-index:1; .but li width:14px;height:14px;float:left;color:#fff;font-size:10px;text-align:ce

4、nter;line-height:14px;font-family:Verdana;background:#bbb;display:inline;margin:0 5px 0 0;cursor:pointer;border:1px solid #a9abaa; .but li.hove background:#ff902a;border:1px solid #ff6502; function $(id) return typeof id = string ? document.getElementById(id) : id; function $(oParent, elem) return (

5、oParent | document).getElementsByTagName(elem); function $(oParent, sClass) var aElem = $(oParent, *); var aClass = ; var i = 0; for(i=0;iaElem.length;i+)if(aElemi.className = sClass)aClass.push(aElemi); return aClass; function Slide() 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理

6、- - - - - - - 第 2 页，共 14 页 - - - - - - - - - this.initialize.apply(this, arguments); Object.extend = function(destination, source) for (var property in source) destinationproperty = sourceproperty; return destination; ; Slide.prototype = initialize : function(obj, list, but, hove, onEnd) if($(obj) t

7、his.obj = $(obj); this.oList = $(this.obj, list)0; this.oUl = $(this.oList, ul)0; this.aList = $(this.oList, li); this.aListH = this.aList0.offsetHeight; this.aListW = this.aList0.offsetWidth; this.oBut = $(this.obj, but)0; this.aBut = $(this.oBut, li); this.oEve(onEnd); this.oAction = this.onEnd.ac

8、tion; this.onEnd.method = mouseover ? this.method = mouseover : this.method = click; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 14 页 - - - - - - - - - this.onEnd.autoplay = stop ? this.autoplay = stop : this.autoplay = play; if(this.oAction = top) this.oUl.

9、style.height = this.aListH * this.aList.length +px; else if(this.oAction = left) this.oUl.style.width = this.aListW * this.aList.length +px; else if(this.oAction = opacity) this.oUl.style.height = this.aListH +px; var i = 0; for(i=0;ithis.aList.length;i+) this.aListi.style.position = absolute; this.

10、aListi.className = opacity; this.aList0.className = ; else this.oUl.style.height = this.aListH * this.aList.length +px; this.getEvent(hove); , oEve: function(onEnd) this.onEnd = 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 14 页 - - - - - - - - - method : clic

11、k, autoplay: stop ; Object.extend(this.onEnd, onEnd | ); , addEvent : function(oElm, strEvent, fuc) window.addEventListener ? oElm.addEventListener(strEvent, fuc, false) : oElm.attachEvent(on + strEvent, fuc); , getEvent : function(hove) var _this = this; var i = iNow = 0; for(i=0;ithis.aBut.length;

12、i+) (function() var j = i; _this.addEvent(_this.aButj, _this.method, function() _this.fnClick(j, hove); _this.autoPlayTab(j, hove); ); )(); this.autoPlayTab(i, hove); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 14 页 - - - - - - - - - , autoPlayTab : function

13、(iNow, hove) if(this.autoplay = play) var _this = this; this.iNow = iNow; this.obj.onmouseover = function() clearInterval(_this.timer); ; this.obj.onmouseout = function() clearInterval(_this.timer); _this.timer = setInterval(playTab,3000); ; clearInterval(_this.timer); _this.timer = setInterval(play

14、Tab,3000); function playTab() if(_this.iNow = _this.aBut.length)_this.iNow = 0; _this.fnClick(_this.iNow, hove); _this.iNow+; , fnClick : function(oBut, hove) var i = 0; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 14 页 - - - - - - - - - for(i=0;ithis.aBut.le

15、ngth;i+)this.aButi.className = ; this.aButoBut.className = hove; if(this.oAction = top) this.sMove(this.oUl, top:-(this.aListH * oBut); else if(this.oAction = left) this.sMove(this.oUl, left:-(this.aListW * oBut); else if(this.oAction = opacity) var i = 0; for(i=0;i 0 ? Math.ceil(this.iSpeed) : Math

16、.floor(this.iSpeed); if(jsonthis.attr != this.iCur)this.bStop = false; if(this.attr = opacity) obj.style.filter = alpha(opacity: + (this.iCur + this.iSpeed) +); obj.style.opacity = (this.iCur + this.iSpeed ) / 100; else obj.stylethis.attr = this.iCur + this.iSpeed + px; 名师资料总结 - - -精品资料欢迎下载 - - - -

17、- - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 14 页 - - - - - - - - - if(this.bStop) clearInterval(obj.timer); if(onEnd)onEnd(); ; window.onload = function() new Slide(box, list, but, hove, action : opacity); new Slide(box1, list, but, hove, method : mouseover, action : top, autoplay : pla

18、y); new Slide(box2, list, but, hove, action : left, autoplay : play); new Slide(box3, list, but, hove, action : opacity, autoplay : play); ; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 14 页 - - - - - - - - - 1 2 3 4 5 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - -

19、 - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 14 页 - - - - - - - - - 1 2 3 4 5 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 14 页 - - - - - - - - - 1 2 3 4 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 14 页 - - - - - - - - - 5 1 2 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 14 页 - - - - - - - - - 3 4 5 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 14 页 - - - - - - - - -