渐隐渐显轮播图

Html代码

   

  // 这里面的内容都是动态添加的
      ![](延迟加载)
      ![](img/banner2.jpg)
      ![](img/banner3.jpg)
      ![](img/banner4.jpg)
    
    

// 这里面的内容也是动态添加的
       

       

       

       

    
     // 左右按钮
     
     

CSS代码

图片是定位的，就会叠加在一起，这样就可以渐隐渐显，图片相对于容器wrap定位；ul指示器也是定位的，

*{
   margin:0;
   padding:0;
   list-style:none;
 }
 .wrap{
     width:1000px;
     height:340px;
     margin:30px auto;
     position:relative;
     // 图片未加载的时候显示的默认图片
     background:url('img/default.gif') center no-repeat #ccc
  }
  .wrap img{
     position:absolute;
     left:0;
     top:0;
     // 实际开发的时候，我们会在Img身上套上一个div，所以应该考虑是是div隐藏
     opacity:0;
     filte:alpha(opacity=0);
     z-index:0;

   }
   // 目前是最后一张图片在上面，可以使用z-index来使得第一张图片在上面 img:nth-child(1){ z-index:1;}
   .wrap ul{
       position:absolute;
       right:30px;
       bottom:30px;
    }
    .wrap ul li{
       width:20px;
       height:20px;
       float:left;
       margin-left:10px;
       background:#ccc;
       border-radius:50%;
     }
     .wrap ul li.active{
         background:red;
      }
 // 左右按钮垂直居中 公共样式
    .wrap a{
        position:absolute;
        top:50%;
        width:30px;
        height:46px;
        margin-top:-23px;
        background:url('img/pre.png') no-repeat; // 背景图
        opacity:0.5;
        filter:alpha(opacity:50);
        display:none;
     }
     .wrap a:hover{
        opacity:1;
        filiter:alpha(opacity:100);
     }        
     .wrap a.left{
         left:20px;
         background-position:0 0;
      }
      .wrap a.right{
         right:20px;
         background-position:-50px 0;
       }

ajax获取数据

渐隐渐现的轮播图不需要多加第一张图片

// 首先先引入jquery

// 下面是自己写的js

// 首先获取元素 
var $wrap=$('.wrap');
var $boxInner=$wrap.find('.boxInner'); // 限定范围的获取
var $aImg=null;
var $ul=$wrap.find('ul');//在wrap里面寻找ul
var $left=$wrap.find('.left');
var $right=$wrap.find('.right');
var $aLi=null;// ul下面的孩子li

// 获取的data放在全局，方便使用 
var data=null;
// 全局变量n来控制图片的滚动
var n=0;

// ajax获取数据
getData();
function getData(){
    $.ajax({
        url:'json/data.txt', // 请求地址
        type:'get', //请求方式
        async:'false',//同步
        dataType:'json', // 返回的数据类型
        success:function(val){
           // 成功的回调
           data=val;// 成功获取的数据赋值给data data是获取的原生的js数据
          
         }
     })
 }
// 绑定数据 确保数据是在外面可以获取的
bindData();
function bindData(){
   var str=''; // 动态添加数据
   var strLi='';

   // 对获取的原始数据对象进行遍历 使用$.each(遍历的数据，callback回调函数（index索引值，索引值对应的内容item）)
   $.each(data,function(index,item){
       // 字符串拼接
       str+='';
       strLi+=index==0?'
':'
';
    });
// 还要添加一张第一张的图片
    // str+='';
    // 把数据插入到容器里面
    $boxInner.html(str);
    $ul.html(strLi);
    // 获取插入容器的图片和li
    $aImg=$boxInner.children('img');
    $aLi=$ul.children('li');

// 改变boxInner的宽度
// $boxInner.css({width:$aImg.length*1000});
// $boxInner.css('width',$aImg.length*1000);
 }
console.log($aImg);// 有了图片
// 延迟加载
lazyImg();
function lazyImg(){
 // 遍历图片
// $aImg.each(function(index,item){})  实例的方法 区别是对于原生js的用法
 $.each($aImg,function(index,item){   // 类的方法
     // item每一个img对象是原生的js
// 创建临时图片对象
  var tmpImg=new Image; //原生的
  tmpImg.src=$(item).attr('realImg');// 拿到图片的真正的地址属性realImg

// 验证图片的准确性 原生才有onload事件 
   tmpImg.onload=function(){
      // 对item赋值
      item.src=this.src;
      // 等图片加载成功之后，应该让第一张图片显示 渐隐显示 动态的 开启定时器之前应该先关闭定时器
      $aImg.first().stop().animate({
          opacity:1,
          zIndex:1
       },1500);
       // fadeIn和fadeOut只针对display：none的，对于css属性设置为opacity来是无效的
       // $aImg.first().stop().fadeIn().css('zIndex',1); 提高css的层级
       tmpImg=null; // 释放临时变量
    }
  })
 }
// 图片自动轮播 创建一个全局的变量n来决定第几张图片显示 开定时器

clearInterval(timer);
var timer=setInterval(autoMove,2000);
function autoMove(){
// 思路一
n++；
n%=$aImg.length;

autoPlayImg();

// 思路二
//if(n>=$aImg.length-1){
  // n=-1;
 // }
 
   n++;
n%=$aImg.length;
   // 那张图片的索引值等于n，那张图片就显示
   setBanner();  // 这个函数在这调用，但是获取的n的值是全局变量的n值
 }

function autoPlayImg(){
// 当索引值等于n的时候，就显示图片，层级提高，并且让对应的兄弟图片隐藏
$aImg.eq(n).css('zIndex',1).fadeIn(1000).siblings().css('zIndex',0).fadeOut();

// 焦点轮播要获取到n的值，n的值在定时器里面调用，异步，所以要在定时器里面调用，获取正确的n值
bannerTip();
 
}


function setBanner(){
    //遍历每一张图片，那张图片的索引等于n，就让那张图片显示
    $aImg.each(function(index,item){
         if(index===n){
            $(item).css({zIndex:1}).fadeIn(1000,function(){
             $(this).siblings('img').css({zIndex:0}).fadeOut();
             })
          }else{
      $(item).css({zIndex:0});
 }
     })
 }
// 焦点自动轮播  那张图片显示的时候，那个焦点就点亮

function bannerTip(){
     // 这个函数里面要获取n的值，n的值在定时器里面累加的，是异步，要获取就必须在前面定时器函数里面调用

// 让当前索引值为n的按钮点亮，同时让兄弟元素变灭
$aLi.eq(n).addClass('active').siblings().removeClass('active');
}

// 鼠标引入停止，移除继续运动
$wrap.mouseover(function(){
    //  $left.stop().fadeIn();
 $left.show();
      $right.show();
     clearInterval(timer);
}).mouseout(function(){
        $left.hide();
      $right.hide();
   // 开启定时器
  timer=setInterval(autoMove,2000);
});

// 点击焦点手动切换
$aLi.click(function(){
      
// $(this).index() 获取不到n的值，只能获取li的索引值
n=$(this).index(); // 这个改变全局的n值，因为全局的n值与焦点的索引值不一样
autoPlayImg();
})
// 点击左右按钮手动切换
$right.click(function(){
     autoMove(): 
});
$left.click(function(){
     n--;
 n=n%$aImg.length;

})

注意

jQuery中没有DOM映射（页面结构发生改变的时候，元素对象自动的发生改变，HTML的DOM结构跟元素集合之间存在一一对应的关系）
jQuery里面没有等号=，没有on
私有变量：形参；函数里面带var的变量
jQuery中索引值是负数也可以