下次实践想做一个淡入淡出的相册切换效果. 切换倒是没问题. 但在淡入淡出的效果上出现问题了.
现在没思路.
原理我先说下我的想法.
1.首先遍历所有图片.除了第一张外.将其余图片的opacity都设置为0.
2.当切换开始的时候,同时控制两个图片的opacity.前一张不断减小到0.当为0时候隐藏 
  后一张不断增加图片的opacity.从0一直到1.但现在遇到问题就是.如果一张图片渐隐到一半的时候 我就开始切换了. 那么opacity应该怎么处理?顺便急需一位师傅. 虽然不太可能.但如果有意愿 愿意帮帮小弟的. 可以留个QQ 或者 Email.
不然实在有太多问题不理解了.谢谢

解决方案 »

  1.   

    对于jQuery来说,这不是什么大问题
      

  2.   

    对于opacity的处理,写一个专门的类。这样处理两张图片的时候,就可以同时改变opacity
      

  3.   

    这是我半成品的下载链接 由于有图片  你下载看下 谢谢
    http://dl.dropbox.com/u/3362522/UI/Slider.rar
      

  4.   

    代码如下:<!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>
      <title> Slide </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style>
        *{ margin: 0;padding: 0;}
       #container {position: relative;width: 515px;height: 221px;overflow: hidden;border:1px solid #D3D2D2;padding: 1px;}
    #container .stage {height: 221px;width: 405px;}
    #container .stage div {position: absolute;top: 0;left: 0;border-right: 1px solid #D3D2D2;padding: 1px;}
    #container img {border: none;}
    #container .nav {position: absolute;top:0;right:0;list-style: none;font-size: 14px;padding-top: 1px;padding-right: 1px;}
    #container .nav li {border-bottom: 1px solid #EDEDED; overflow:hidden; width:106px;height:36px;}
    #container .nav li a {display: block;text-indent: 10px;padding: 10px 15px;color: #666;text-decoration: none; }
    #container .nav li a:hover {text-decoration:underline;}
    #container .nav  li.selected {background-color: #C8282B;}
    #container .nav  li.selected a:hover {text-decoration: none;}
    #container .nav  li.selected a {background-color: #C8282B;color: #fff;border-left: 4px solid #B30024;}
    .first {opacity: .99;filter: alpha(opacity=99);}
      </style>
      <script>
      var Class = function(properties) {
    var klass = function() {
    return (arguments[0] !== null && this.initialize && typeof this.initialize == 'function') ?
    this.initialize.apply(this, arguments) : this;
    }
    klass.prototype = properties;
    klass.constructor = Class;
    return klass;
      };
      var $extend = function(a, b) { for(var c in (b || {})) {a[c] = b[c];} return a; };
      var $ = function(id) { return document.getElementById(id); };
      var $$ = function(tag, p) { return (p || document).getElementsByTagName(tag); };
      var isIE = navigator.userAgent.indexOf('MSIE') != -1 ? true : false;
      var forEach = function(array, callback, thisp) {
    if(array.forEach){ 
    array.forEach(callback, thisp);
    }else {
    for(var i = 0, len = array.length; i < len; i++) {
    if(i in array) callback.call(thisp, array[i], i, array);
    }
    }
      };  var Slide = new Class({
    options: {
    'auto': true
    },
    initialize: function(cId, nId, options) {
    this.container = $(cId);
    this.navi = $(nId);
    this.nextIndex = 0;
    this.currIndex = 0;
    this.nextOpac = 0;
    this.currOpac = 0;
    this.curnav = $$('li', this.navi)[0];
    this.curcontext = $$('div', this.container)[0];
    $extend(this, $extend(this.options, options || {}));
    this.bindEvents();
    },
    bindEvents: function() {
    var _navs = $$('li', this.navi),_context = $$('div', this.container); _this = this, _timer = null;
    forEach(_context, function(O, index) {
    index > 0 && (O.style.display = 'none');
    });
    // 首先遍历所有导航 并加标识--除第一张图片的opacity为0.99 其余都为0;
    forEach(_navs, function(O, index){
    O._index = index;
    O._opac = 0;
    O.onmouseover = function() {
    var _me = this;
    clearTimeout(_timer);
    _timer = setTimeout(function(){
    _this.onStart(_me); // 准备淡入淡出
    }, 300);
    };
    });
    _navs[0]._opac = .99;
    },
    setOpacity: function(O, opacity) {
    if(opacity > .99) {
    opacity = .99;
    }
    if(!!isIE) {
    O.style.filter = 'alpha(opacity = ' + (opacity * 100) + ')';
    }else {
    O.style.opacity = opacity;
    }
    },
    // 准备淡入淡出
    onStart: function(O) {
    this.currIndex = this.curnav._index; // 当前索引
    this.nextIndex = O._index; // 下一个索引
    this.currOpac = this.curnav._opac;  // 当前透明度
    this.nextOpac = O._opac; // 下一个透明度
    this.currContext = $$('div', this.container)[this.currIndex];
    this.nextContext = $$('div', this.container)[this.nextIndex];
    this.currNav = $$('li', this.navi)[this.currIndex];
    this.nextNav = $$('li', this.navi)[this.nextIndex];
    this.nextContext.style.display = 'block';
    this.curnav.className = '';
    this.nextNav.className = 'selected';
    /**
    * 思路: 先获得当前图片 和下一张图片的 索引和透明度.
    *         然后进入slideImg函数进行opacity控制.
    *   当前图片opacity不断减小一直到0的时候隐藏
    *   下一张图片的opacity不断增大 一直到1.
    *   疑问: 如果渐隐到一半的时候进行切换 那么opacity该怎么设置?
    */         
    this.slideImg();
    },
    slideImg: function() {
    var _this = this;
    this.currOpac -= .1;
    this.nextOpac += .1;
    var _currOpac = this.currOpac;
    var _nextOpac = this.nextOpac;
    //console.log(' -----' + this.currOpac);
    if(_currOpac <= 0) {
    this.currContext.style.display = 'none';
    this.curnav = this.nextNav;
    this.curnav._opac = this.nextOpac;
    this.nextOpac = .99;
    this.currOpac = 0;
    //console.log(this.nextOpac + ' ' + this.currOpac);
    }else {
    this.setOpacity(this.currContext.getElementsByTagName('img')[0], _currOpac);
    this.setOpacity(this.nextContext.getElementsByTagName('img')[0], _nextOpac);
    setTimeout(function(){
    _this.slideImg.call(_this);
    }, 50)
    }
    }  });
      </script>
     </head> <body>
     
      <div id="container">
       <div id="context" class="stage">
        <div><a href="#"><img width="405" height="221" alt="年终风暴" src="6.jpg" class="first"/></a></div>
            <div><a href="#"><img width="405" height="221" alt="终极秒杀" src="1.jpg"/></a></div>
            <div><a href="#"><img width="405" height="221" alt="9折话费" src="2.gif"/></a></div>
            <div><a href="#"><img width="405" height="221" alt="彩票派送" src="3.jpg"/></a></div>
            <div><a href="#"><img width="405" height="221" alt="限量抢购" src="4.jpg"/></a></div>
            <div><a href="#"><img width="405" height="221" alt="周末购" src="5.jpg"/></a></div>    </div>
        <ul class="nav" id="nav">
            <li class="selected"><a href="#">年终风暴</a></li>
            <li><a href="#">终极秒杀</a></li>
            <li><a href="#">9折话费</a></li>
            <li><a href="#">彩票派送</a></li>
            <li><a href="#">限量抢购</a></li>
            <li><a href="#">周末购</a></li>
        </ul>
      </div>
      <script>
    var slide = new Slide('context', 'nav', {'auto': false});
      </script>
     </body>
    </html>