图片轮播_changeopa-CSDN博客

本文链接：https://blog.csdn.net/qq_34893429/article/details/57130649

CSS3
主要思想：图片位置或者opacity的变化实现图片的出现与消失，同时利用动画延时来控制每一张图片动画播放的时间。
不能算作严格意义上的图片轮播，只能按照规定的顺序播放一次。

@keyframes changeOpa{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@-webkit-keyframes changeOpa{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
#page4 > .p4_1 {
    display: block;
    width: 64vw;
    height: 24vh;
    position: absolute;
    top: 0vh;
    left: 10.66vw;
    border-radius:50%;
    background: url("../image/p4_p1.JPG") no-repeat center center;
    background-size: 100%;
    opacity: 0;
    animation: changeOpa 8s  ease-in-out;
    -webkit-animation: changeOpa 8s  ease-in-out;
    overflow: hidden;
}
#page4 > .p4_2 {
    display: block;
    width: 64vw;
    height: 24vh;
    position: absolute;
    top: 0vh;
    left: 10.66vw;
    border-radius: 50%;
    background: url("../image/p4_p2.JPG") no-repeat center center;
    background-size: 100%;
    opacity: 0;
    -webkit-animation: changeOpa 8s  ease-in-out 8s 1;
    animation: changeOpa 8s  ease-in-out 8s 1;
    overflow: hidden;
}
#page4 > .p4_3 {
    display: block;
    width: 64vw;
    height: 24vh;
    position: absolute;
    top: 0vh;
    left:10.66vw;
    border-radius:50%;
    background: url("../image/p4_p3.JPG") no-repeat center center;
    background-size: 100%;
    opacity: 0;
    -webkit-animation: changeOpa 8s  ease-in-out 16s 1;
    animation: changeOpa 8s  ease-in-out 16s 1;
    overflow: hidden;
}

Javascript
思想：1、图片都已经再页面中，通过改变opacity属性来实现轮播。
2、通过改变图片的src来实现图片的更新。

改变src：

<script type="text/javascript">
var timeID;
var image;
var current = 0;
var images = new Array(5);
//建立图像对象：图像对象名称=new Image([宽度],[高度])

// 图像对象的属性： border complete height hspace lowsrc name src vspace width

// 图像对象的事件：onabort onerror onkeydown onkeypress onkeyup onload

// 需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。

function init() {
    for (var i = 1; i <= 5; i++) {
        images[i] = new Image(450, 550);
        images[i].src = "pictures/" + i + ".jpg";
    }
    //引用Dom中第一个一个image对象
    image = document.images[0];
}

function setSrc(i) {
    current = i;
    //设置图片src的属性，实现图片的切换
    image.src = images[i].src;
}

function pre() {
    if (current <= 0) {
        current = 0;
    } else {
        current--;
        setSrc(current);
    }
}

function next() {
    if (current >= 5) {
        current = 5;
    } else {
        current++;
        setSrc(current);
    }
}

function play() {
    if (current >= 5) {
        current = 0;
    }
    setSrc(++current);
}
</script>
//src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。
<body onload="init()">
    <input type="button" value="第一张" onclick="setSrc(1)">
    <input type="button" value="上一张" onclick="pre()">
    <input type="button" value="下一张" onclick="next()">
    <input type="button" value="最后一张" onclick="setSrc(5)">
    <input type="button" value="幻灯播放" onclick="timeID=setInterval('play()',500)">
    <input type="button" value="停止播放" onclick="clearInterval(timeID)">
    <div style="border:1px solid blue;width:450px; height:550px;" id="myPic">
        <img src="pictures/1.jpg" />
    </div>
</body>

改变opacity：
核心animation函数（已考虑兼容性并封装）

//封装了一个名叫animate的函数， 函数封装完成后我们只需要调用即可实现：
// 这是一个运动框架，而且是多属性的！
// 创建一个名为animate的函数！obj为对象，json是json值，fn是回调函数！
function animate(obj, json, fn) {
    clearInterval(obj.timer); //清除定时器，这一步是有影响的！
    // 给对象设置一个定时器！
    obj.timer = setInterval(function() {
        var flag = true; //用来判断定时器什么时候停止！

        //for in 循环，遍历json对象！ 
        for (var attr in json) {

            var current = 0;
            // 当前的状态，这一步很重要！
            if (attr == "opacity") {
                current = parseInt(getStyle(obj, attr) * 100);
            } else {
                current = parseInt(getStyle(obj, attr));
            }
            // 步长！
            var step = (json[attr] - current) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);

            // 判断透明度！
            if (attr == "opacity") { //in是一个二元的运算符，意思是第一个操作数的值是第二个操作数的属性名，会返回true！
                // 这样就可以判断这个对象的样式上中是否有opacity的属性了！
                if ("opacity" in obj.style) {
                    // 如果条件成立，设置透明度值
                    obj.style.opacity = (current + step) / 100;
                } else {
                    // 如果不成立，则使用滤镜功能！

                    obj.style.filter = "alpha(opacity = " + (current + step) + ")";

                }
            }

            // 层叠！
            else if (attr == "zIndex") {
                obj.style.zIndex = json[attr];
            } else {
                obj.style[attr] = current + step + "px";
            }
            // 截止值!
            if (current != json[attr]) {
                flag = false;
            }
        }
        if (flag) {
            clearInterval(obj.timer);
            // 如果有回调就使用回调！
            if (fn) {
                fn();
            }
        }
    }, 5)
}
// 考虑兼容性问题！
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return window.getComputedStyle(obj, null)[attr];
    }
}