淡隐淡出幻灯片

历经一天多终于把这个带有控制点击幻灯片完成了，成就感嘛，当然是有的啦啦啦~~~~~~~

下面就看看具体的内容：示例图：

关于图片找一组大小相同的就可以。需要注意的图片的路径和名称与文档里的相同哦！！！

css

 <style type="text/css">
    body {
      font-family: "Microsoft YaHei",arial,courier new,courier,"宋体",monospace;
       font-size:16px;
     color: #333;
    }
    *{
      margin: 0;
      padding:0;
      list-style-type:none;
      border:none;
     }
  a{ text-decoration: none; color: #337ab7;}
  p{ padding: 0px 10px;line-height: 1.5;}
  .clear_float:after{
    content: "";
    display: block;
    clear: both;
  }
  .clear_float:before{
    content: "";
    display: block;
    clear: both;
  }
  img{ display: block;}
  #rotator_wrap{ position: relative; height: 390px;overflow: hidden;}
  #rotator{ position: relative;}
  #rotator li{ float: left; width: 100%; position: absolute; left: 0; top: 0}
  #rotator li img{width: 100%;}  

  #rotator_controls{
    position: absolute;
    bottom: 10px;
    right: 100px;
    width: 90px;
  }
  #rotator_controls li{
    width: 30px;
    float: left;
    text-align: center;
  }
 #rotator_controls li a{
  display: block;
  background: #fff;
 }
  #rotator_controls li .current{background: #f00;}
</style>

html

 <div id="rotator_wrap" class="clear_float">
       <ul id="rotator" class="clear_float">
         <li id="picter_1"><img src="image/smsc_01.jpg"></li>
         <li id="picter_2"><img src="image/smsc_02.jpg"></li>
         <li id="picter_3"><img src="image/smsc_03.jpg"></li>
       </ul>

       <ul id="rotator_controls">
          <li><a href="#picter_1" class="current">1</a></li>
          <li><a href="#picter_2">2</a></li>
          <li><a href="#picter_3">3</a></li>
       </ul>
 </div>

javascript

<script type="text/javascript">
      //
      function init_rotator(){
        
         //alert($($($('.letter'))).text()); alert($('.letter')).text());
         //元素是否存在，若不存在则退出
         if (!$('#rotator').length) { return;}
         
         var speed = 2000;
         $('#rotator li:first').siblings('li').hide();
         
         //处理程序函数
         function rotator(element){
          //下一个/第一个li
          var $next_li = $(element).next('li').length?$(element).next('li'):$('#rotator li:first');

          //下一个/第一个控制链接
          var $next_a = $('#rotator_controls a.current').parent('li').next('li').length?
                        $('#rotator_controls a.current').parent('li').next('li').find('a'):
                        $('#rotator_controls a:first');      
            
            // 控制链接的样式变化
            $('#rotator_controls a.current').removeClass('current');
            $next_a.addClass('current');
            
            //始终保持控制链接和相应的图片对应
            //开始编写没有添加这段代码，在点击切换图片时出现Bug,体验效果不够好
            var $rotator_control_href = $('#rotator_controls a.current').attr('href');    
              var $rotator_id ='#'+ $(element).attr('id');
               if ($rotator_id != $rotator_control_href) {
                    $($rotator_control_href).show().siblings().hide();
               };

          //继续，相当于回调函数
          function doIt(){
            rotator($next_li);
          }
         
         //当前元素，消逝
         $(element).fadeOut(speed);

         //下一个元素显示
         $next_li .fadeIn(speed, function(){
               setTimeout(doIt, speed);
            });
         }
         
        //添加监听单击事件
        $('#rotator_controls a').click(function(){
             $(this).addClass('current').parent().siblings().find('a').removeClass('current');
             $($(this).attr('href')).show().siblings().hide();

             //不要追踪链接
             this.blur();
             return false;
        });

         //等待页面加载
         $(window).load(function(){
           //开始循环，参数$('#rotator li:visible:first')是一个对象
             setTimeout(function(){
                rotator($('#rotator li:visible:first'));
             },2000);
         });
        
      }

      init_rotator();
  </script>

我想说的：

1.rotator(element)函数的参数，element这个参数本身传入的是jQuery对象，在下文写法$(element)相当于$($(dom元素))，所以这里创建了一个jQuery对象副本。jQuery对象副本与其对应的jQuery对象

  操作的DOM元素相同。这里之所以使用副本，更好识别代码更整齐。

2.var $next_li = $(element).next('li').length?$(element).next('li'):$('#rotator li:first');循环图片下一个的判断，代码很容易明白，只是想说$next_li变量存放的是jQuery对象，在下文中$($next_li),道理和上一条一样；

3.if ($rotator_id != $rotator_control_href)判断当前循环图片和控制链接是否一致，这段代码不是核心代码，但是是必须得，不然在点击切换出现Bug滴；

4. setTimeout(function(){
                rotator($('#rotator li:visible:first'));
             },2000);

初始化函数的参数，其实可以不需要setTimeout()方法延迟的，但是当第一次加载效果时，第一张图片是一闪而过，并且控制链接相应的样式是在第二个变签上，体验差了一点儿。

总之，还算完整，也还完美~~~~~~~~~~~~~~~~