<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> html,body,ul,img{margin:0;padding:0;color:#fff;} body{background:#666;} img{border:none;} li{list-style:none;} #playImages{width:400px;height:430px;background:#CCC;margin:50px auto;font:12px Arial;} #big_images{width:400px;height:320px;position:relative;} #big_images .prev,#big_images .next{position:absolute;top:131px;width:60px;height:58px; filter:alpha(opacity=0);opacity:0;z-index:101;} #big_images .prev{left:10px;background:url(images/left_btn.jpg);} #big_images .next{right:10px;background:url(images/right_btn.jpg);} #big_images .mark{position:absolute;bottom:0;left:0;width:400px;height:30px;background:#000;filter:alpha(opacity=50);opacity:0.5;z-index:102;} #big_images .text,#big_images .number{position:absolute;top:9px;z-index:102;} #big_images .text{left:0;} #big_images .number{right:0;} #big_images .mark_left,#big_images .mark_right{position:absolute;top:0;width:200px;height:320px;filter:alpha(opacity=0);opacity:0;cursor:pointer;z-index:100;} #big_images .mark_left{left:0;} #big_images .mark_right{right:0;} #big_images li{width:400px;height:320px;overflow:hidden;position:absolute;}/*①*/ #big_images .active{z-index:1;} #big_images img{width:400px;height:320px;} #small_images{width:400px;height:110px;position:relative;overflow:hidden;} #small_images ul{position:absolute;height:110px;overflow:hidden;} #small_images li{float:left;padding-top:7px;padding-left:10px;filter:alpha(opacity=30);opacity:0.3;} #small_images img{width:120px;height:96px;} #small_images .active{filter:alpha(opacity=100);opacity:1;} /*说明：①/*需要加上绝对定位后面使用z-index才生效,这里只有加上overflow，height下拉渐变效果才能显示出来，因为在运动的过程中height是一点点变的，其他的部分需要隐藏才能显示出下拉渐变这种效果*/ */ </style> <script src="move.js"></script> <script> function getClassName(oParent,sClass){ var aEle = oParent.getElementsByTagName('*'); var aResult = []; for(var i=0;i<aEle.length;i++){ if(aEle[i].className == sClass){ aResult.push(aEle[i]); } } return aResult; } window.onload = function(){ var oDiv = document.getElementById('big_images'); var oBtnPrev = getClassName(oDiv,'prev')[0]; var oBtnNext = getClassName(oDiv,'next')[0]; var oMarkLeft = getClassName(oDiv,'mark_left')[0]; var oMarkRight = getClassName(oDiv,'mark_right')[0]; var bigUl = oDiv.getElementsByTagName('ul')[0]; var bigLi = bigUl.getElementsByTagName('li'); var oSmallDiv = document.getElementById('small_images'); var smallUl = oSmallDiv.getElementsByTagName('ul')[0]; var smallLi = oSmallDiv.getElementsByTagName('li'); var smallText = getClassName(oDiv,'text')[0]; var smallNumber = getClassName(oDiv,'number')[0]; var arrPicture =['图片一','图片号','图片3']; var iNow = 0; var imageZindex = 2; smallUl.style.width = (smallLi[0].offsetWidth*smallLi.length)+'px'; init(); var timer = null; clearInterval(timer); timer = setInterval(function(){ iNow++; if(iNow == smallLi.length){ iNow = 0; } tab(); },3000); //上面的左右按钮 oBtnPrev.onmouseover = oMarkLeft.onmouseover = function(){ startMove(oBtnPrev,'opacity',100); }; oBtnPrev.onmouseout = oMarkLeft.onmouseout = function(){ startMove(oBtnPrev,'opacity',0); }; oBtnNext.onmouseover = oMarkRight.onmouseover = function(){ startMove(oBtnNext,'opacity',100); }; oBtnNext.onmouseout = oMarkRight.onmouseout = function(){ startMove(oBtnNext,'opacity',0); }; for(var i=0;i<smallLi.length;i++){ smallLi[i].index = i; smallLi[i].onmouseover = function(){ startMove(this,'opacity',100); }; smallLi[i].onmouseout = function(){ if(this.index != iNow){ startMove(this,'opacity',30); } }; smallLi[i].onclick = function(){ if(iNow == this.index){ return; } iNow = this.index; tab(); }; } oBtnPrev.onclick = function(){ iNow--; if(iNow == -1){ iNow = smallLi.length-1; } tab(); }; oBtnNext.onclick = function(){ iNow++; if(iNow == smallLi.length ){ iNow = 0; } tab(); }; function init(){ smallText.innerHTML = arrPicture[iNow%arrPicture.length]; smallNumber.innerHTML = iNow+1+'/'+smallLi.length; } function tab(){ for(var j=0;j<smallLi.length;j++){ startMove(smallLi[j],'opacity',30); bigLi[iNow].style.zIndex = 1; } startMove(smallLi[iNow],'opacity',100); bigLi[iNow].style.zIndex = imageZindex++; bigLi[iNow].style.height = 0; startMove(bigLi[iNow],'height',320); if(iNow ==0){ startMove(smallUl,'left',0); }else if(iNow == smallLi.length-1){ startMove(smallUl,'left',-(iNow-2)*smallLi[0].offsetWidth) }else{ startMove(smallUl,'left',-(iNow-1)*smallLi[0].offsetWidth); } init(); } }; </script> </head> <body> <div id='playImages'> <div id='big_images'> <span class='prev'></span> <span class='next'></span> <div class="mark"> <span class='text'>图片正在加载……</span> <span class='number'>计算图片数量……</span> </div> <a class='mark_left' href='javascript:;'></a> <a class='mark_right' href='javascript:;'></a> <ul> <li class='active'><img src = 'images/1.jpg'></li> <li><img src = 'images/2.jpg'></li> <li><img src = 'images/3.jpg'></li> <li><img src = 'images/4.jpg'></li> <li><img src = 'images/5.jpg'></li> <li><img src = 'images/6.jpg'></li> <li><img src = 'images/7.jpg'></li> </ul> </div> <div id='small_images'> <ul> <li class ='active'><img src = 'images/1.jpg'></li> <li><img src = 'images/2.jpg'></li> <li><img src = 'images/3.jpg'></li> <li><img src = 'images/4.jpg'></li> <li><img src = 'images/5.jpg'></li> <li><img src = 'images/6.jpg'></li> <li><img src = 'images/7.jpg'></li> </ul> </div> </div> </body> </html>