前端基本功--网页特效5 12.12

• 模仿网易的轮播图
  写了很久，特多步骤，屡一下思路：

1. 先手动添加span中的图片，添加文字，当前颜色；
2. 把所有图片移动到右边去，left = 盒子宽度；
3. 开始遍历，按钮为左，右，方块三部分；
4. 左：当前图片右移，执行animate中动画，判断是第一张去最后一张，（设置图片左移 left为负值）最后执行animate动画使left变为0；
5. 右：与左边相反；
6. 方块：点击的值大于当前右移，小于当前左移，最后赋相等的索引值，使图片left为0，回到当前。
7. 添加变色函数；
8. 全局定时器，两秒钟执行一次右移函数。
9. 清除定时器。

window.onload = function(){
  function $(id){return document.getElementById(id);}
    var big = $("big");
    var big_a = $("big_a");
    var big_b = $("big_b");
    var main = $("main");
    var imgs = main.children;
    //开始添加span
    for(var i=0;i<imgs.length;i++){
        var span = document.createElement("span");
        big_b.insertBefore(span,big_b.children[1]);
        span.innerHTML = imgs.length-i; //倒着添加的 654321
        span.className = "square";
    }
    //变色
    var spans = big_b.children;
    spans[1].setAttribute("class","square current");
    //让图片都放在后边
    var imgwidth = big.clientWidth;
    for( i=1;i<imgs.length;i++){
        imgs[i].style.left = imgwidth + "px";
    }
    //遍历按钮
    var now = 0;//图片张数
    for(k in spans){
       spans[k].onclick = function(){
           if (this.className == "zuo"){
               //当前这张先去右边,
               // 上一张如果是第一张就返回最后一张，
               // 如果不是就让上一张来现在这个位置
               animate(imgs[now],{left:imgwidth});

               --now < 0 ? now = imgs.length-1:now;
               imgs[now].style.left = -imgwidth + "px";//向左走
               animate(imgs[now],{left:0});// 使当前left为0
               color();

           }
           else if(this.className == "you") {
               //当前这张去左边
               //如果是最后一张就返回第一张，
               // 如果不是就让下一张来现在这个位置
               auto();
           }
           else {
           //图片自个向右走
               var that = this.innerHTML-1;//转换成数值
               if(that > now){
                   animate(imgs[now],{left:-imgwidth});
                   imgs[that].style.left = imgwidth + "px";
               }
               else if(that < now) {
                   animate(imgs[now],{left:imgwidth});
                   imgs[that].style.left = -imgwidth + "px";//向左走
               }
               now = that;
               //很重要，给当前的索引号，
               // （比如当前是第四张，点了第二张，下一张应该播放第三张，要赋给now）
               //如果不加 每次都是now出去，乱了！！
               animate(imgs[now],{left:0});
               color();
           }
       }
        //点左边，左边的图标往右跑，看左边的！！
       }
    //控制方块颜色的函数
    function color(){
        for( i=1 ;i<spans.length-1;i++){ //只需要一到六的span
            spans[i].className ="square";
        }
        spans[now+1].className = "square current";
    }
    var timer = null;
    timer = setInterval(auto,2000);
    function auto(){
          animate(imgs[now],{left:-imgwidth});

          ++now >imgs.length-1 ? now = 0 : now ;
          imgs[now].style.left = imgwidth + "px";
          animate(imgs[now],{left:0});
          color();
    }
    big.onmouseover = function(){
        clearInterval(timer);
    }
    big.onmouseout = function(){
        clearInterval(timer);
        //最好先清除一下定时器！
        timer = setInterval(auto,2000);
    }
}

• 旋转木马轮播图：
  思路？点击左侧，删除第一个添加到最后一个，
  点击右侧，删除最后一个添加到第一个。（封装在change函数中）
  属于交换json的方法！
  change函数中需要进行运动，对象是li中的图片，修改的值是json中写好的值用for循环进行遍历。
  tip：回调函数 点击后立马变成相反的，等动画执行，执行完毕才可以再点击。

/**
 * Created by susan on 2017/12/12.
 */
window.onload = function(){
  function $(id){return document.getElementById(id);}
    var big = $("big");
    var big_a = $("big_a");
    var big_b = $("big_b");
    var lis = big_a.getElementsByTagName("li");
    //两个箭头的效果
    big.onmouseover = function(){
        animate(big_b,{"opacity":100});
    }
    big.onmouseout = function(){
        animate(big_b,{"opacity":0});
    }
    //写出所有 的json值
    var json =[
        {
            width:200,
            top:5,
            opacity:20,
            left:80,
            z:2
        },
        {
            width:400,
            top:50,
            opacity:50,
            left:50,
            z:3
        },
        {
            width:600,
            top:80,
            opacity:70,
            left:0,
            z:4
        },
        {
            width:800,
            top:100,
            opacity:100,
            left:200,
            z:5
        },
        {
            width:600,
            top:80,
            opacity:70,
            left:600,
            z:4
        },
        {
            width:400,
            top:50,
            opacity:50,
            left:750,
            z:3
        },
        {
            width:200,
            top:5,
            opacity:20,
            left:920,
            z:2
        }];
    //点击事件
    var panduan = true;
    var btns = big_b.children;
    change();
    for(k in btns){
    btns[k].onclick = function(){
        if(this.className == "zuo"){
            if(panduan == true){
                change(false);
                panduan = false;
                //点击之后立马就反的，直到动画执行完毕，回调函数那边变成true啦！就可以再点击了！
            }
        }
        else{
            if(panduan == true){
                change(true);
                panduan = false;
            }

        }
    }
}

    function change(flag){
        if(flag){
            //删除最后一个，添加到第一个
            json.unshift(json.pop());
        }
        else{
            json.push(json.shift());
        }
        for(var i=0;i<json.length;i++){
            animate(lis[i], {
                width: json[i].width,
                top: json[i].top,
                opacity: json[i].opacity,
                left:json[i].left,
                zIndex:json[i].z},function(){panduan = true;})
          }

        }
    }