CSS实现图片轮播

使用CSS实现简单的图片轮播功能

示例

1.分析
整个屏幕可以分为四个小块 每一块都使用相同的背景图片 用backgroung-position改变显示图片的位置 使他们各自显示的图片拼起来正好是一个整体的图片 接着通过animation动画产生滑动的效果
其次这四个小块都放在一个盒子里 这个盒子的背景将是下一张要显示的图片 四个小方块绝对定位在这个盒子的上下左右 这样当图片滑出小块时显示的就是底下盒子的背景图片
当再次点击下一个按钮时 要将四个小块的背景图片换成底下盒子的背景图片 再进行动画滑动 而底下盒子的背景图片则改成下一次要显示的图片（js代码） 以此类推
2.实现
1.首先写html代码 用一个div包裹住四个div 用span作为两个按钮

<div id="content">  
        <div class="part part1"></div>
        <div class="part part2"></div>
        <div class="part part3"></div>
        <div class="part part4"></div>
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>

2.在css里将他们的基本样式设置好

        body{
            position: relative;
        }
        div#content{
            width: 600px;
            height: 600px;
            position: absolute;
            left: 0; right:0;
            top:0; bottom: 0;
            margin: auto;
            border: 1px solid black;
        }
        div.part{
            width: 50%;
            height: 50%;
            position: absolute;
            border: 1px solid red;
        }
        div.part1{
            left: 0;top:0;
        }
        div.part2{
            left: 50%;top:0;
        }
        div.part3{
            left: 0;top:50%;
        }
        div.part4{
            left: 50%;top:50%;
        }
        div span{
            border:1px solid blue;
            position: absolute;
            top: 50%;
            font-size: 120px;
            color:black;
            transform:translateY(-50%);
        }
        span#left{
            left: 0;
        }
        span#right{
            left: 85%;
        }

3.之后来拼好4个div的背景图片

div.part1{
            left: 0;top:0;
            background-position: left top;
        }
        div.part2{
            left: 50%;top:0;
            background-position: right top;
        }
        div.part3{
            left: 0;top:50%;
            background-position: left bottom;
        }
        div.part4{
            left: 50%;top:50%;
            background-position: right bottom;
        }

3.我们用animation给四个div加上动画

        @keyframes part1{
            from{background-position: left top;}
            to{background-position: left -100%;}
        }
        @keyframes part2{
            from{background-position: right top;}
            to{background-position: 200% top;}
        }
        @keyframes part3{
            from{background-position: left bottom;}
            to{background-position: -100% bottom;}
        }
        @keyframes part4{
            from{background-position: right bottom;}

![这里写图片描述](http://img.blog.youkuaiyun.com/20161126084054641)

我们可以先给盒子加一个背景图片试一下效果  如果只是单纯的显示后面盒子的背景图片动画效果不是很明显 所以我们给盒子也加上动画 让它的背景图片产生从外往内缩的动画效果
    注意:这里要吧盒子的背景图片位置定位在center才会出现以中心为点进行收缩 否则看到的是以右上角为中心进行收缩的画面
    ![这里写图片描述](https://img-blog.youkuaiyun.com/20161126085236866)

把调用动画的代码先删掉 还有盒子的背景图片也先不要加 下面写js代码

var index = 1;

var picParts = [
    "images/image1.jpg",
    "images/image2.jpg",
    "images/image3.jpg"
];

var content = document.getElementById("content");
var parts = content.getElementsByTagName("div");

var leftButton = document.getElementById("left");
var rightButton = document.getElementById("right");

window.onload = function(){
    leftButton.onclick = function(){
        changeImage(false);
    }
    rightButton.onclick = function(){
        changeImage(true);
    }
    content.style.backgroundImage = "url(" +  picParts[index] + ")";
};

function changeImage(flag){
if(content.style.animationName == "newPic"){
    return;
}
index = flag?(index+1>3?1:index+1):(index-1<1?3:index-1);   

content.style.backgroundImage = "url(" +  picParts[index-1] + ")";
//3.content和parts执行相应的动画
for (var i = 0; i < parts.length; i++) {
    parts[i].style.animationName= flag?"part" +(i+1):"partLeft" +(i+1);
};
content.style.animationName = "newPic"; 
//4.清空重置动画 让动画生效
setTimeout(function(){
    content.style.animationName = "none";
    for (var i = 0; i < parts.length; i++) {
        parts[i].style.animationName="none";
        //5.parts显示下一次退场的图片
        parts[i].style.backgroundImage = content.style.backgroundImage;
    };
},700);

}
“`