标签：com http class blog style img div code java javascript tar
原文:CSS3图片轮播效果
在网页中用到图片轮播效果，单纯的隐藏、显示，那再简单不过了，要有动画效果，如果是自己写的话(不用jquery等)，可能要费点时间。css3的出现，让动画变得不再是问题，而且简单易用。下面介绍我用css3与js写的一个图片轮播效果。
一般图片轮播就是三四张图片：
<div class="wrap"> <div class="carousel"> <div><img src="http://b204.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/DAx8jd*wHkeZfn2KFFIozuCId3oyygApuIabRH0huoI!/b/Ydkzp3nFfQAAYrelonkwfwAA&bo=ngL2AQAAAAABAEw!" /></div> <div><img src="http://b206.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/ajO.4FllSbmZVzpKUjPuydfO50ov0WWQ6cE0k0LIrOw!/b/Yci2zXo*cwAAYgFU0nokCAAA&bo=YwLqAQAAAAABAK0!&rf=viewer_4" /></div> <div><img src="http://b206.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/0HDFCiFDzavtBxpA.3J3bzxmEzO2MqmnCO*9Us*s5PA!/b/YU5U1XoGcQAAYn3J0HqhcQAA&bo=TgKlAQAAAAABAM8!&rf=viewer_4" /></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="http://b204.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/DAx8jd*wHkeZfn2KFFIozuCId3oyygApuIabRH0huoI!/b/Ydkzp3nFfQAAYrelonkwfwAA&bo=ngL2AQAAAAABAEw!" /></div> <div><img src="http://b206.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/ajO.4FllSbmZVzpKUjPuydfO50ov0WWQ6cE0k0LIrOw!/b/Yci2zXo*cwAAYgFU0nokCAAA&bo=YwLqAQAAAAABAK0!&rf=viewer_4" /></div> <div><img src="http://b206.photo.store.qq.com/psu?/41e4346e-5d60-4a3e-8af9-0492dd6f0e56/0HDFCiFDzavtBxpA.3J3bzxmEzO2MqmnCO*9Us*s5PA!/b/YU5U1XoGcQAAYn3J0HqhcQAA&bo=TgKlAQAAAAABAM8!&rf=viewer_4" /></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代码就能实现。
标签：com http class blog style img div code java javascript tar
原文地址：http://www.cnblogs.com/lonelyxmas/p/3693949.html
