仿Flash的图片轮播，但是我想当鼠标点击小图片时，改变当前大图片的z—index；但是没有效果，贴出了代码。
0
悬赏园豆：30
[已解决问题]
解决于 2014-09-30 10:49
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>无标题文档</title> 6 <style> 7 * {margin:0;padding:0} 8 ul {list-style:none;} 9 img {border:none} 10 .player {width:490px;height:477px;background:red;margin:20px auto;position:relative;overflow:hidden} 11 .bigPic {width:490px;height:350px;position:absolute;left:0;top:0} 12 .bigPic li {position:absolute} 13 .smallPic {width:490px;height:107px;position:absolute;bottom:10px;overflow:hidden} 14 .smallPic li {float:left;margin-left:10px;display:inline;opacity:0.6;filter:alpha(opacity:60)} 15 .smallPic .active {opacity:1;filter:alpha(opacity:100)} 16 17 .mark_left {display:block;width:245px;height:350px;background:red;position:absolute;z-index:3;left:0;opacity:0;filter:alpha(opacity:0)} 18 .mark_right {display:block;width:245px;height:350px;background:yellow;position:absolute;z-index:3;right:0;opacity:0;filter:alpha(opacity:0)} 19 20 .prev {width:50px;height:50px;background:transparent url(left.png) 0 0 no-repeat;position:absolute;z-index:4;top:150px;cursor:pointer;opacity:0;filter:alpha(opacity:0)} 21 .next {width:50px;height:50px;background:transparent url(right.png) 0 0 no-repeat;position:absolute;z-index:4;top:150px;cursor:pointer;right:0;opacity:0;filter:alpha(opacity:0)} 22 </style> 23 <script> 24 window.onload=function (){ 25 var player=document.getElementById('player'); 26 var markLeft=getClass(player,'mark_left')[0]; 27 var markRight=getClass(player,'mark_right')[0]; 28 var prev=getClass(player,'prev')[0]; 29 var next=getClass(player,'next')[0]; 30 31 var bigpicbox=getClass(player,'bigPic')[0]; 32 var bigpic=bigpicbox.getElementsByTagName('li'); 33 var smallpicbox=getClass(player,'smallPic')[0]; 34 var sPb=parseInt(getStyle(smallpicbox,'width')); 35 36 37 var smallpic=smallpicbox.getElementsByTagName('li'); 38 var now=0; 39 var zIndexMin=2; 40 41 smallpicbox.style.width=sPb*2+'px'; 42 for(var i=0;i<smallpic.length;i++){ 43 smallpic[i].index=this; 44 45 smallpic[i].onmouseover=function (){ 46 move(this,'opacity',100) 47 } 48 smallpic[i].onmouseout=function (){ 49 if(this.index!=now){ 50 move(this,'opacity',60) 51 } 52 } 53 smallpic[i].onclick=function (){ 54 for(var i=0;i<smallpic.length;i++){ 55 move(smallpic[i],'opacity',60) 56 } 57 move(this,'opacity',100) 58 //下面这句有问题，但是不知道哪里出了错，总感觉this.index没有起作用 59 bigpic[this.index].style.zIndex=zIndexMin++; 60 61 now=this.index; 62 } 63 } 64 //left and right 65 prev.onmouseover=markLeft.onmouseover=function (){ 66 move(prev,'opacity',100) 67 } 68 prev.onmouseout=markLeft.onmouseout=function (){ 69 move(prev,'opacity',0) 70 } 71 next.onmouseover=markRight.onmouseover=function (){ 72 move(next,'opacity',100) 73 } 74 next.onmouseout=markRight.onmouseout=function (){ 75 move(next,'opacity',0) 76 } 77 78 79 } 80 function getClass(oParent,sClass){ 81 var aelement=document.getElementsByTagName('*'); 82 var arry1=[]; 83 for(var i=0;i<aelement.length;i++){ 84 if(aelement[i].className==sClass){ 85 arry1.push(aelement[i]); 86 } 87 } 88 return arry1; 89 } 90 function getStyle(obj,name){ 91 if(obj.currentStyle){ 92 return obj.currentStyle[name]; 93 }else{ 94 return getComputedStyle(obj,false)[name]; 95 } 96 } 97 function move(obj,attr,target){ 98 clearInterval(obj.timer); 99 obj.timer=setInterval(function (){ 100 var icur=0; 101 if(attr=='opacity'){ 102 icur=parseInt(parseFloat(getStyle(obj,attr))*100); 103 }else{ 104 icur=parseInt(getStyle(obj,attr)) 105 } 106 var speed=(target-icur)/8; 107 speed=speed>0?Math.ceil(speed):Math.floor(speed); 108 if(icur==target){ 109 clearInterval(obj.timer); 110 }else{ 111 if(attr=='opacity'){ 112 icur+=speed; 113 obj.style.opacity=icur/100; 114 obj.style.filter='alpha(opacity:'+icur+')'; 115 }else{ 116 obj.style[attr]=icur+speed+'px'; 117 } 118 } 119 },30); 120 } 121 </script> 122 </head> 123 124 <body> 125 <div class="player" id="player"> 126 <div class="prev"></div> 127 <div class="next"></div> 128 <a href="javascript:;" class="mark_left"></a> 129 <a href="javascript:;" class="mark_right"></a> 130 <div > 131 <ul class="bigPic"> 132 <li style="z-index:1"><a href="javascript:;"><img src="1.jpg" /></a></li> 133 <li><a href="javascript:;"><img src="2.jpg" /></a></li> 134 <li><a href="javascript:;"><img src="3.jpg" /></a></li> 135 <li><a href="javascript:;"><img src="4.jpg" /></a></li> 136 <li><a href="javascript:;"><img src="5.jpg" /></a></li> 137 <li><a href="javascript:;"><img src="6.jpg" /></a></li> 138 </ul> 139 </div> 140 <div> 141 <ul class="smallPic"> 142 <li class="active"><a href="javascript:;"><img src="11.jpg" /></a></li> 143 <li><a href="javascript:;"><img src="22.jpg" /></a></li> 144 <li><a href="javascript:;"><img src="33.jpg" /></a></li> 145 <li><a href="javascript:;"><img src="44.jpg" /></a></li> 146 <li><a href="javascript:;"><img src="55.jpg" /></a></li> 147 <li><a href="javascript:;"><img src="66.jpg" /></a></li> 148 </ul> 149 </div> 150 <span class="description">图片说明</span> 151 <span class="count">图片数量计算</span> 152 </div> 153 </body> 154 </html>
最大的问题就是在59行
最佳答案
0
楼上，说的很对，43行的this是window对象,改为i试下 smallpic[i].index=i;
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。
收获园豆：20
确实是的，改了一下就可以动了，谢谢啊
其他回答(1)
1
你这个this指向是不是明确。我感觉这会儿的this应该是Window,用谷歌调试一下看看。太晚了，洗洗睡了。
收获园豆：10
确实是的，谢谢啊。但是我以前做tab选项卡，也是用的这种形式，却没有出问题。
@wstpa: 嗯，没事，大家互相帮助。
