原文:CSS3图片轮播效果
在网页中用到图片轮播效果，单纯的隐藏、显示，那再简单不过了，要有动画效果，如果是自己写的话(不用jquery等)，可能要费点时间。css3的出现，让动画变得不再是问题，而且简单易用。下面介绍我用css3与js写的一个图片轮播效果。
一般图片轮播就是三四张图片：
<div class="wrap">
<div class="carousel">
<div><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvYjIwNC5waG90by5zdG9yZS5xcS5jb20vcHN1Py80MWU0MzQ2ZS01ZDYwLTRhM2UtOGFmOS0wNDkyZGQ2ZjBlNTYvREF4OGpkKndIa2VaZm4yS0ZGSW96dUNJZDNveXlnQXB1SWFiUkgwaHVvSSEvYi9ZZGt6cDNuRmZRQUFZcmVsb25rd2Z3QUEmYW1wO2JvPW5nTDJBUUFBQUFBQkFFdyE=.jpg" /></div>
<div><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvYjIwNi5waG90by5zdG9yZS5xcS5jb20vcHN1Py80MWU0MzQ2ZS01ZDYwLTRhM2UtOGFmOS0wNDkyZGQ2ZjBlNTYvYWpPLjRGbGxTYm1aVnpwS1VqUHV5ZGZPNTBvdjBXV1E2Y0UwazBMSXJPdyEvYi9ZY2kyelhvKmN3QUFZZ0ZVMG5va0NBQUEmYW1wO2JvPVl3THFBUUFBQUFBQkFLMCEmYW1wO3JmPXZpZXdlcl80.jpg" /></div>
<div><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvYjIwNi5waG90by5zdG9yZS5xcS5jb20vcHN1Py80MWU0MzQ2ZS01ZDYwLTRhM2UtOGFmOS0wNDkyZGQ2ZjBlNTYvMEhERkNpRkR6YXZ0QnhwQS4zSjNienhtRXpPMk1xbW5DTyo5VXMqczVQQSEvYi9ZVTVVMVhvR2NRQUFZbjNKMEhxaGNRQUEmYW1wO2JvPVRnS2xBUUFBQUFBQkFNOCEmYW1wO3JmPXZpZXdlcl80.jpg" /></div>
</div>
</div>
首先将图片左浮动成一排，最外层div设置宽度、高度，然后用 overflow:hidden 只显示第一张图片，隐藏超出的宽度部分的其他图片。样式表如下：
<style>
.wrap {
width: 600px;
min-height:400px;
margin: 0 auto;
position: relative;
overflow: hidden;//隐藏超出的内容
}
.carousel {
position: absolute;//定位图片
transition: all 0.5s ease-in 0s;//轮播动画
}
img {
width: 100%;
}
.carousel div {
float: left;
width: 33.333%;
text-align: center;
}
.button {
text-align: center;
}
</style>
其中最关键的就是：
transition: all 0.5s ease-in 0s;
这就是css3中的过渡属性，当元素从一种样式变换为另一种样式时为元素添加效果。属性中的每个值得意义：要过渡的属性、完成过渡的时间、过渡的动画效果、延迟开始时间
我把设置图片的宽度和全部图片的总宽度在js中进行，因为图片的张数可能会变。如果在css中设置，那么图片数变化的时候，就要修改css中相应的值，而在js中就可以一劳永逸。下面是js：
<script>
(function () {
var carousel = document.querySelector(".carousel");
var img = carousel.querySelectorAll("div");
var len = img.length;
[].forEach.call(img, function (item) {
item.style.width = (100 / len) + "%";//设置每张图片宽度
});
carousel.style.left = "0%";//设置left
carousel.style.width = (100 * len) + "%";//设置全部图片宽度
var pre = document.querySelector(".pre");
var next = document.querySelector(".next");
var i = 0;
next.onclick = function () {
var left = carousel.style.left;
if (i < len - 1) {
carousel.style.left = (parseInt(left) - 100) + "%";//当还没到最后一张图片时left减100%
i++;
}
else if (i == len - 1) {
carousel.style.left = "0%";最后一张时，点击按钮跳到第一张
i = 0;
}
};
pre.onclick = function () {
var left = carousel.style.left;
if (i > 0) {
carousel.style.left = (parseInt(left) + 100) + "%";//不是第一张时left加100%
i--;
} else if (i == 0) {
carousel.style.left = -parseInt(carousel.style.width) + 100 + "%";//第一张时，点击按钮跳到最后一张
i = len - 1;
}
};
}());
</script>
当点击按钮时，改变元素的left值，就会出现动画效果，因为css中设置了 transition: all 0.5s ease-in 0s ，就是当left改变时，立即慢速开始过渡效果，在0.5秒之内完成。
图片轮播效果就已经完成了，贴出全部代码：
<!DOCTYPE html>
<html>
<head>
<title>图片轮播</title>
<meta charset="utf-8" />
<style>
.wrap {
width: 600px;
min-height:400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.carousel {
position: absolute;
transition: all 0.5s ease-in 0s;
}
img {
width: 100%;
}
.carousel div {
float: left;
text-align: center;
}
.button {
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="carousel">
<div><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvYjIwNC5waG90by5zdG9yZS5xcS5jb20vcHN1Py80MWU0MzQ2ZS01ZDYwLTRhM2UtOGFmOS0wNDkyZGQ2ZjBlNTYvREF4OGpkKndIa2VaZm4yS0ZGSW96dUNJZDNveXlnQXB1SWFiUkgwaHVvSSEvYi9ZZGt6cDNuRmZRQUFZcmVsb25rd2Z3QUEmYW1wO2JvPW5nTDJBUUFBQUFBQkFFdyE=.jpg" /></div>
<div><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvYjIwNi5waG90by5zdG9yZS5xcS5jb20vcHN1Py80MWU0MzQ2ZS01ZDYwLTRhM2UtOGFmOS0wNDkyZGQ2ZjBlNTYvYWpPLjRGbGxTYm1aVnpwS1VqUHV5ZGZPNTBvdjBXV1E2Y0UwazBMSXJPdyEvYi9ZY2kyelhvKmN3QUFZZ0ZVMG5va0NBQUEmYW1wO2JvPVl3THFBUUFBQUFBQkFLMCEmYW1wO3JmPXZpZXdlcl80.jpg" /></div>
<div><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvYjIwNi5waG90by5zdG9yZS5xcS5jb20vcHN1Py80MWU0MzQ2ZS01ZDYwLTRhM2UtOGFmOS0wNDkyZGQ2ZjBlNTYvMEhERkNpRkR6YXZ0QnhwQS4zSjNienhtRXpPMk1xbW5DTyo5VXMqczVQQSEvYi9ZVTVVMVhvR2NRQUFZbjNKMEhxaGNRQUEmYW1wO2JvPVRnS2xBUUFBQUFBQkFNOCEmYW1wO3JmPXZpZXdlcl80.jpg" /></div>
</div>
</div>
<div class="button"><button class="pre">上一张</button><button class="next">下一张</button></div>
<script>
(function () {
var carousel = document.querySelector(".carousel");
var img = carousel.querySelectorAll("div");
var len = img.length;
[].forEach.call(img, function (item) {
item.style.width = (100 / len) + "%";
});
carousel.style.left = "0%";
carousel.style.width = (100 * len) + "%";
var pre = document.querySelector(".pre");
var next = document.querySelector(".next");
var i = 0;
next.onclick = function () {
var left = carousel.style.left;
if (i < len - 1) {
carousel.style.left = (parseInt(left) - 100) + "%";
i++;
}
else if (i == len - 1) {
carousel.style.left = "0%";
i = 0;
}
};
pre.onclick = function () {
var left = carousel.style.left;
if (i > 0) {
carousel.style.left = (parseInt(left) + 100) + "%";
i--;
} else if (i == 0) {
carousel.style.left = -parseInt(carousel.style.width) + 100 + "%";
i = len - 1;
}
};
}());
</script>
</body>
</html>
View Code
点击下面的两个按钮，就会出现轮播效果：
上一张下一张
css3的出现真的给前端开发者(特别是像我这样的初级者)带来很多好处，以前要制作一些动画，用flash或者用js写一大堆代码才能实现，现在的css3可能就用简单几行代码加上简单的的几行js代码就能实现。
时间： 2024-10-22 04:30:51