<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.slide,.main,.main-i{width: 100%;height: 500px;}.slide{position: relative;}.slide .main{overflow: hidden;}.slide .main .main-i{opacity: 0;position: absolute;top: 0;right: 50%;transition: all .5s;}.slide .main .main_active{right: 0;opacity: 1;}.slide .main .main_active h2,.slide .main .main_active h3{opacity: 1;margin-right: 0;}.slide .main .main-i h2,.slide .main .main-i h3{transition: all .5s .8s;}.slide .main .main-i img{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}.caption{position: absolute;right: 50%;top: 30%;z-index: 2;}.caption h2{font-family: "微軟雅黑";font-size: 40px;line-height:50px;?color: #000;text-align: right;margin-right: 45px;opacity: 0;}.caption h3{font-family: "微軟雅黑";font-size: 60px;line-height: 60px;color: #000;text-align: right;margin-right: -45px;opacity: 0;}.ctrl{width: 100%;height: 13px;position: absolute;bottom: ?-13px;left: 0;text-align: center;}.ctrl .ctrl-i{display: inline-block;width: 150px;height: 15px;background-color: #333;position: relative;}.ctrl .ctrl-i:hover{background-color: #999;}.ctrl .ctrl_active:hover,.ctrl .ctrl_active{background-color: #333;}.slide .ctrl .ctrl_active:hover img,.slide .ctrl .ctrl_active img{opacity: 0;}.ctrl .ctrl-i:hover img{opacity: 1;bottom: 13px;}.ctrl .ctrl-i img{width: 100%;position: absolute;bottom: 50px;left: 0;opacity: 0;transition: all .5s;}</style></head><body><div><div><div><div><h2>懷王</h2><h3>仙福永享。</h3></div><img src="1.jpg"></div><div><div><h2>懷王</h2><h3>仙福永享。</h3></div><img src="2.jpg"></div><div><div><h2>懷王</h2><h3>仙福永享。</h3></div><img src="3.jpg"></div></div><div id="ctrl"><a href="#" index="0"><img src="1.jpg"></a><a href="#" index="1"><img src="2.jpg"></a><a href="#" index="2"><img src="3.jpg"></a></div></div><script type="text/javascript">function g(cls,parent){var oparent=parent?document.getElemengById('parent'):document;var eles=[];? ?var elements=oparent.getElementsByTagName('*');? ?for(var i=0;i<elements.length;i++){? ? if(elements[i].className==cls){? ? eles.push(elements[i]);? ? }? ?}? ? return eles;}window.onload=function(){var main=g('main-i');var ctrl=g('ctrl-i');for(var i=0;i<ctrl.length;i++){ctrl[i].onclick=function(){var myindex=parseInt(this.getAttribute('index'));var main=g('main-i');var ctrl=g('ctrl');for (var i = 0; i < ctrl.length; i++) {ctrl[i].className.replace(" ctrl_active","");main[i].className.replace(" main_active","");}this.className+=" ctrl_active";main[myindex].className+=" main_active";}}}</script></body></html>
JS代碼出錯，就大神講解
zzZyq
2016-04-21 21:11:04
