原生JS旋转木马

本代码采用原生js开发，没有插件。

使用方法：

引入CSS样式文件

<link rel="stylesheet" href="css/css.css"/>

引入必要JS文件

<script src="js/animate.js" type="text/javascript">script>

效果初始化、参数配置

var wrap = document.getElementById("wrap");  // 大盒子
    var arrow = document.getElementById("arrow");  // 三角
    var slider = document.getElementById("slide");
    var lis = slider.getElementsByTagName("li");  // 所有要操作的盒子
    wrap.onmouseover = function() {  // 鼠标经过显示和隐藏 左右两个箭头
         animate(arrow,{'opacity':100});
    }
    wrap.onmouseout = function() {
        animate(arrow,{'opacity':0});
    }
    //  存储了每个图片的信息
    var json = [
        {   //  1
            width:400,
            top:20,
            left:50,
            opacity:20,
            z:2
        },
        {  // 2
            width:600,
            top:70,
            left:0,
            opacity:80,
            z:3
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity:100,
            z:4
        },
        {  // 4
            width:600,
            top:70,
            left:600,
            opacity:80,
            z:3
        },
        {   //5
            width:400,
            top:20,
            left:750,
            opacity:20,
            z:2
        }
    ];
    //  两个按钮点击事件
    // 函数节流
    var jieliu = true; //  用来控制函数节奏的 变量
    var as = arrow.children;
    change();
    for(var k in as)
    {
        as[k].onclick = function() {
            if(this.className == "prev")
            {
                //  alert("左侧")  移除第一个   放到json 最后一个
                if(jieliu == true)
                {
                    change(false);
                    jieliu = false;  // 点击完毕之后，立马取反
                }
            }
            else
            {
               // alert('右侧');   把 最后一个json 删除   并且把最后一个添加到json 第一个位置
                if(jieliu == true)
                {
                    change(true);
                    jieliu = false;  // 点击完毕之后，立马取反
                }
            }
        }
    }
    function change(flag) {
        //  来判断
        if(flag)
        {
            // 把 最后一个json 删除   并且把最后一个添加到json 第一个位置
             json.unshift(json.pop());
        }
        else
        {
            //   移除第一个   放到json 最后一个
            json.push(json.shift());
        }
      // 为什么给for呢？ 以为我们的json 有5个  盒子li 有 5个
        for(var i=0;ifunction(){ jieliu = true;})  // 回调函数是等动画执行完毕  才行
        }
    }

HTML结构

<div class="wrap" id="wrap">
   <div class="slide" id="slide">
       <ul>
           <li><a href="#"><img src="images/slidepic1.jpg" alt=""/>a>li>
           <li><a href="#"><img src="images/slidepic2.jpg" alt=""/>a>li>
           <li><a href="#"><img src="images/slidepic3.jpg" alt=""/>a>li>
           <li><a href="#"><img src="images/slidepic4.jpg" alt=""/>a>li>
           <li><a href="#"><img src="images/slidepic5.jpg" alt=""/>a>li>
       ul>
       <div class="arrow" id="arrow">
           <a href="javascript:;" class="prev">a>
           <a href="javascript:;" class="next">a>
       div>
   div>
div>