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"><</span>
<span id="right">></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.csdn.net/20161126084054641)

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

}

“`