CSS3图片轮播效果

原文: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>

  点击下面的两个按钮,就会出现轮播效果:

上一张下一张

  css3的出现真的给前端开发者(特别是像我这样的初级者)带来很多好处,以前要制作一些动画,用flash或者用js写一大堆代码才能实现,现在的css3可能就用简单几行代码加上简单的的几行js代码就能实现。

CSS3图片轮播效果,布布扣,bubuko.com

时间: 04-26

CSS3图片轮播效果的相关文章

js实现淘宝首页图片轮播效果

原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淘宝首页图片轮播效果</title> <style> <!-- * {margin: 0;padding:0;} body

基于css3的轮播效果

花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framework动画效果实现轮播效果以及之前提到的input:checked伪类来实现轮播的控制.在轮播的控制上不可避免的使用了js,一直想写出优雅的js代码,在看了自己写的代码之后发现自己还有很大的提升空间,也许该找个机会去阅读优秀框架的源代码了. 当然也借鉴了网上很多资料,有问题的是在ie下完全没有效果,对

jQuery个性化图片轮播效果

购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域:   最外层容器区域,如上图红色线框矩形   选项卡区域 两个事件:    鼠标悬浮或鼠标划入mouseover    鼠标离开mouseleave /**大屏广告滚动样式**/ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

首页图片轮播效果

<html><head><meta  charset="utf-8" /><title>首页图片轮播效果</title><style type="text/css">* {margin: 0;padding:0;}body {background: #222;}ol{list-style: none;}img {border: 0 none;}#slider { border: 1px soli

简单的图片轮播效果

用js代码来实现一个简单的图片轮播效果 鼠标移入图片后显示左右箭头按钮,点击就可以实现图片的切换. 以下分别是html代码和js代码,欢迎批评和讨论! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> *{padding:0px; margin:0px;

图片轮播效果

今天有点空,写了个图片轮播的效果,使用了jq,直接上代码吧. 效果:http://edwardzhong.github.io/blog/2014/10/31/slidePics.html html如下: <div class="wrap"> <div class="left fl"><</div> <div class="right fr">></div> <div c

安卓首页图片轮播效果(淘宝、京东首页广告效果)

直奔主题: 1.主要原理就是利用定时任务器定时切换ViewPager的页面. 2.里面用了一个读取网络图片的插件.做client使用本地图片轮播的也非常少. 先上个效果图: 项目代码结构截图: 自己定义View 的布局文件layout_slideshow.xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.and

Jquery实现图片轮播效果

废话不多说,先上源码 1 <div id="baner"> 2 <div class="imgt"> 3 <div class="shadeDiv clarity"></div><!-- 透明层 --> 4 <ul> 5 <li name="1"></li> 6 <li name="2"></l

基于原生js的图片轮播效果简单实现

基本效果如下: 实现了三张图片自动轮播+按键点击切换的效果. 基本思想: 图片轮播的效果和老式电影院的胶片放映形式很相似,在老式的电影院放映中,使用长长的胶片记录影片,胶片上是按顺序排列的一系列图片,通过快速通过放映机放映口,使这些图片产生一个连贯的切换效果,形成了动态的影片.所以,这里图片轮播的形式也可以采用这种方式来形成动画效果. 形式如下图: (黑框即我们的最外层的容器,充当放映机的存在:绿框就是胶片,上面搭载着很多的图片:粉框内即我们要轮播的图片) 从上图出发,我们要做到图片轮播,那么只