原生javascript实现图片轮播效果代码

  看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿。

  【原理简述】

  html和css跟JQuery实现图片轮播效果里面的一样,略去。主要是几个公共函数,渐显和渐失,用闭包实现。至于主体逻辑部分,非常一般。

  【程序源码】

  贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失

  

复制代码 代码如下:

  function id(name) {return document.getElementById(name);}

  //遍历函数

  function each(arr, callback) {

  if (arr.forEach) {arr.forEach(callback);}

  else {

  for (var i = 0, len = arr.length; i < len; i++) callback.call(this, arr[i], i, arr);}

  }

  function fadeIn(elem) {

  setOpacity(elem, 0)

  for ( var i = 0; i < 20; i++) {

  (function() {

  var pos = i * 5;

  setTimeout(function() {

  setOpacity(elem, pos)

  }, i * 25);

  })(i);

  }

  }

  function fadeOut(elem) {

  for ( var i = 0; i <= 20; i++) {

  (function() {

  var pos = 100 - i * 5;

  setTimeout(function() {

  setOpacity(elem, pos)

  }, i * 25);

  })(i);

  }

  }

  // 设置透明度

  function setOpacity(elem, level) {

  if (elem.filters) {

  elem.style.filter = "alpha(opacity=" + level + ")";

  } else {

  elem.style.opacity = level / 100;

  }

  }

  【调用方法】

  //count:图片数量,wrapId:包裹图片的DIV,ulId:按钮DIV,infoId:信息栏

  babyzone.scroll(count,wrapId,ulId,infoId);

  babyzone.scroll(4,"banner_list","list","banner_info");

  【源码下载】

  /201009/yuanma/scroll_babyzone.rar