用原生JS实现旋转轮播图_js 旋转轮播图-CSDN博客

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>

css代码

ol, ul {
    list-style: none
}

.wrap {
    width: 1200px;
    margin: 100px auto;
}

.slide {
    height: 500px;
    position: relative;
}

.slide li {
    position: absolute;
    left: 200px;
    top: 0;
}

.slide li img {
    width: 100%;
}

.arrow {
    opacity: 0;
}

.prev, .next {
    width: 76px;
    height: 112px;
    position: absolute;
    top: 50%;
    margin-top: -56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}

.next {
    right: 0;
    background-image: url(../images/next.png);
}

JS代码

动画封装

function animate(obj, json, fn) {
    // 第一参数 动的对象   2  attr  动的那个属性   3   属性值少多少
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var flag = true;  //  用来判断是否停止定时器   定时器的里面
        //  每隔 30 毫秒就要运行一次
        for (var k in json) {  // k 属性     json[k] 是属性值
            // 第一 k 是 width
            // 第二 k     height
            //  leader  =  600 -  100
            // leader = leader + (target - leader )  /10 ;
            //  计算步长
            // target 目标位置    leader 不清楚，我们不知道用户改那个属性
            // 检测用户给我们了什么属性，  我们就用这个属性的值 来计算
            // 我们怎么知道用户给我们属性，我们怎么又能得到属性的值呢？
            //  var leader = obj.style[attr];  他只能得到行内式
            var leader = 0;
            // 因为透明度是 小数   取值 0~1 之间    第二个  它没有单位
            if (k == "opacity") {
                // 先解决小数的问题
                leader = Math.round(getStyle(obj, k) * 100) || 100;
                // 如果没有opacity  默认当 1 看    1* 100  = 100
                // 我们去过来的是  0.3  但是小数不好计算 我们乘以100   30  好计算
            }
            else {
                leader = parseInt(getStyle(obj, k)) || 0;
                // 他本身有单位 所以要去掉    默认的默认是 0
            }
            //去掉px 的方法   parseInt(25px)   25
            /* alert(leader);*/
            var step = (json[k] - leader) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader = leader + step;
            if (k == "opacity") {   // 记住我们的透明是不加单位的  不要加px
                obj.style.opacity = leader / 100;
//                    opacity: 0.4;
//                    filter: alpha(opacity = 40);     /*不能改只能是 40  不能是 0.4*/
                obj.style.filter = "alpha(opacity = " + leader + ")";
            }
            // 设置层级
            else if (k == "zIndex") {
                obj.style.zIndex = json[k];    //  直接给值
            }
            else {
                obj.style[k] = leader + "px";   // 其他的要单位
            }
            if (leader != json[k]) {  //  只要三个属性有一个没有到达，我就取反
                // 这句话要写到 for in 里面   因为有三个属性，所以用 for in 才能遍历
                // 三个都到了 都不执行这句话了
                flag = false;
            }
        }
        // console.log(flag);
        if (flag) {
            clearInterval(obj.timer);
            if (fn) {   // 如果有函数传递过来  ， 定时器结束了，说明动画结束  可以执行 回调函数
                fn();   // 执行函数  fn + ();
            }
        }
    }, 30)
}

function getStyle(obj, attr) {
    if (obj.currentStyle) {
        // 如果支持，返回改属性值
        //  return  obj.style.left    只能得到行内式的
        // return  obj.currentStyle["left"];   // 正确的写法，但是left 是传进来的
        return obj.currentStyle[attr];
    }
    else {
        return window.getComputedStyle(obj, null)[attr];
    }
}

window.onload = function () {
    var arrow = document.getElementById("arrow");  // 三角
    var wrap = document.getElementById("wrap");   // 大盒子
    var slide = document.getElementById("slide");
    var lis = slide.children[0].children;   // 获得所有的li
    var timer = null;
    var json = [  //  包含了5张图片里面所有的样式
        {   //  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
        }
    ];
    wrap.onmouseover = function () {   // 鼠标经过显示 三角
        animate(arrow, {opacity: 100});
    }
    wrap.onmouseout = function () {  // 鼠标离开 隐藏三角
        animate(arrow, {opacity: 0});
    }
    move(); // 页面执行也调用一次
    // 两个按钮
    var flag = true;   // 用于函数节流
    var as = arrow.children;   // 2 个 a
    for (var k in as) {
        as[k].onclick = function () {
            // 当俺们点击的时候， 只做一件事情  ---- 交换json
            if (this.className == "prev") {  // 左侧按钮
                //  alert(11);
                if (flag == true) {   // 实现按钮只能点击一次
                    move(true);
                    flag = false;
                }
            }
            else {
                /*  当我们点击了 右侧按钮  ：
      把 数组里面的第一个值删掉 ，然后把这个值追加到 数组的最后面。
       json.push(json.shift());*/
                // alert(22);   // 右侧按钮
                if (flag == true) {   // 实现按钮只能点击一次
                    move(false);
                    flag = false;
                }
            }
        }
    }

    //移入的时候轮播停止
    slide.onmouseover = function () {
        clearInterval(timer);
        // direction.style.display = "block";
    };
    //移出的时候轮播继续
    slide.onmouseout = function () {
        autoPlay();
        // direction.style.display = "none";
    };

    autoPlay();

    //自动轮播
    function autoPlay() {
        timer = setInterval(function () {
            move(1)
        }, 2000)
    }

    function move(x) {
        if (x != undefined) {   // 如果没有值传递过来，就应该  不执行 里面的语句直接遍历json
            if (x) {
                // 交换 反向json   左侧
                json.unshift(json.pop())
            } else {
                // 正向 json
                json.push(json.shift());
            }
        }
        // 交换完毕 json 之后，就要 循环执行一次
        for (var i = 0; i < json.length; i++) {
            animate(lis[i], {
                width: json[i].width,
                top: json[i].top,
                left: json[i].left,
                opacity: json[i].opacity,
                zIndex: json[i].z
            }, function () {
                flag = true;
            })
        }
    }
}