Js模仿水波滑动效果图片轮显代码_图片特效特效

这是一个图片切换特效的代码，基本是用Javascript实现的，在图片切换过程中，采用类似水波荡荡的动画效果，给人生动的新体验，本代码还有部分后续工作需完善，仅写出了核心的功能，希望学习JavaScript的朋友参考一下，多提宝贵意见。

<html>
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312">
<title>Js图片水波滑动效果</title>
<style type="text/css">
* {margin:0;padding:0;}
body {margin:5px auto;background:#f0f0f0;}
img {margin:0;border:0;padding:0;}
#jsF {position:relative;margin:0;width:270px;height:185px;overflow:hidden;}
#jsF ul {position:absolute;top:0;left:0;list-style-type:none;z-index:1;}
#jsF li {display:block;position:absolute;top:0;margin:0;padding:0;overflow:hidden;}
</style>
</head>
<body>
<div id="jsF"></div>
<div id="debug"></div>
<script>
//<[CDATA[
var jsF = document.getElementById('jsF');
var speed1 = 50, speed2 = 2000;
var iA = 0, iB = 0, iC = 0;
var bD = [];
var aImg = ['/jscss/demoimg/wall1.jpg','/jscss/demoimg/wall2.jpg','/jscss/demoimg/wall3.jpg','/jscss/demoimg/wall4.jpg','/jscss/demoimg/wall5.jpg' ];
var aLink = ['#','#','#','#','#','#'];
var iImgWidth = 270, iImgHeight = 185;
var iDivWidth = iImgWidth/10;
jsF.style.width = iImgWidth + 'px';
jsF.style.height = iImgHeight + 'px';
var oImg = [];
oImg[0] = new Image();
oImg[0].src = aImg[0];
oImg[1] = new Image();
oImg[1].src = aImg[1];
window.onload = function() {
 jsF_create();
}
function jsF_create() {
 if (aImg[iA+2] && !bD[iA+2]){
  oImg[iA+2] = new Image();
  oImg[iA+2].src = aImg[iA+2];
 }
 if (!bD[iA]) {
  var oUl = document.createElement('ul');
  /*oUl.style.position = 'absolute';
  oUl.style.top = '0';
  oUl.style.left = '0';*/
  oUl.style.width = iImgWidth + 'px';
  oUl.style.height = iImgHeight + 'px';
  var oUlLi = document.createElement('li');
  oUlLi.style.right = '0';
  oUlLi.style.width = iDivWidth +'px';
  oUlLi.style.height = iImgHeight + 'px';
  var oLiA = document.createElement('a');
  oLiA.href = aLink[iA];
  var oLiImg = document.createElement('img');
  oLiImg.src = oImg[iA].src;
  oLiImg.style.marginLeft = -9*iDivWidth + 'px';
  oLiA.appendChild(oLiImg);
  oUlLi.appendChild(oLiA);
  oUl.appendChild(oUlLi);
  for (var i=0; i<10; i++) {
   oUlLi = document.createElement('li');
   oUlLi.style.right = i*iDivWidth + 'px';
   oUlLi.style.width = 1.5*iDivWidth +'px';
   oUlLi.style.height = iImgHeight + 'px';
   //oUlLi.style.background = color[i];
   oLiA = document.createElement('a');
   oLiA.href = aLink[iA];
   oLiImg = document.createElement('img');
   oLiImg.src = oImg[iA].src;
   oLiImg.style.marginLeft = -9*iDivWidth + 'px';
   oLiA.appendChild(oLiImg);
   oUlLi.appendChild(oLiA);
   //oUlLi.appendChild(document.createTextNode(i));
   oUl.appendChild(oUlLi);
  }
  jsF.appendChild(oUl);
  bD[iA] = !bD[iA];
 }
 jsF_show();
 //document.getElementById('debug').innerText = jsF.innerHTML;
}
// http://www.mb5u.com
function jsF_show(){
 var oUl = jsF.getElementsByTagName('ul');
 var oLi = oUl[iA].getElementsByTagName('li');
 var oImgs = oUl[iA].getElementsByTagName('img');
 oUl[iA].style.zIndex = ++iC;
 for (var i=1; i<11; i++){
  oImgs[i].style.marginLeft = -9*iDivWidth + 'px';
  oImgs[i].style.visibility = 'hidden';
 }
 jsF_move();
}
function jsF_move(){
 var oUl = jsF.getElementsByTagName('ul');
 var oLi = oUl[iA].getElementsByTagName('li');
 var oImgs = oUl[iA].getElementsByTagName('img');
 if (iB++<10)
  oImgs[iB].style.visibility = 'visible';
 for (var i=1; i<oImgs.length; i++) {
  var iBgpx = parseInt(oImgs[i].style.marginLeft);
  if (iBgpx<(i+0.5)*iDivWidth-iImgWidth) {
   var iMovePx = Math.floor((iImgWidth-(i+0.5)*iDivWidth+iBgpx)/15);
   oImgs[i].style.marginLeft = iBgpx - iMovePx + 'px';
  } else {
   oImgs[i].style.marginLeft = ((i+0.5)*iDivWidth-iImgWidth) + 'px';
  }
 }
 //document.getElementById('debug').innerText = jsF.innerHTML;
 if (parseInt(oImgs[10].style.marginLeft)<0.5*iDivWidth) {
  setTimeout('jsF_move()',speed1);
 } else {
  iB = 0;
  //document.getElementById('debug').innerText = oUl[iA].style.display;
  iA = ++iA==aImg.length ? 0 : iA;
  if (bD[iA]) {
   setTimeout('jsF_show()',speed2);
  } else {
   setTimeout('jsF_create()',speed2);
  }
 }
}
//]]>
</script>
</body>
</html>

所属频道：图片特效特效/更新时间：2012-11-19

[收藏][报错][返回列表]

Js模仿水波滑动效果图片轮显代码_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些