原文: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代码就能实现。

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

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. 基于css3的轮播效果

    花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...

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

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  4. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  5. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  6. ios图片轮播效果

    代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...

  7. axure 动态面板实现图片轮播效果（淘宝）

    淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料   axure7.0 方法/步骤     下载需要轮播的图片   将图片引入至axure中,将引入的第一张图片转为 ...

  8. WPF3D图片轮播效果

    原文:WPF3D图片轮播效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article/details/68059169 ...

  9. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

随机推荐

  1. 在MyEclipse8.5中配置Tomcat6.0服务器

    一.单击工具栏的的黑小三角,选择—>Configure Server,出现首选项对话框,在对话框的左边框中找到MyEclipse—>Application Servers下找到Tomcat ...

  2. C# Windows Phone 8 WP8,切换各国语系免重开机 加速开发 送审有效率!!

    原文:C# Windows Phone 8 WP8,切换各国语系免重开机 加速开发 送审有效率!! 一般我们在开发Windows Phone 8 时,会考虑到各国语言的问题,但是你有想过吗?用实体手机 ...

  3. 使用Spring的@Autowired 实现DAO, Service, Controller三层的注入（转）

    简述: 结合Spring和Hibernate进行开发 使用@Autowired实现依赖注入, 实现一个学生注册的功能,做一个技术原型 从DAO(Repository) -> Service -& ...

  4. JS window.open()财产

    一. Window 对象 Window 对象是 JavaScript 顶级对象层次. Window 对象表示一个浏览器窗口或帧. Window 在对象 <body> 或 <frame ...

  5. 小米2S twrp 中文，支持双系统

    更新日志: 更新日志: 汉化了要使用的功能 修改语言选择方式,修改为下拉方式 TDB(TrueDualBoot) 功能完美实现 **adb**功能,完美实现,无需特别操作(比CWM强大) 修改双系统切 ...

  6. JQuery操作select checkbox radio总结

    JQuery是一个非常强大的工具,所以我必须找到它最方便的方法,嘻嘻 Select CRUD: Select搜: 1.val值: $("#selectid").val();     ...

  7. A. Initial Bet(Codeforces Round #273)

    A. Initial Bet time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  8. 给EasyUI的DateBox控件添加清除button

     EasyUI中间DateBox控制甚至没有被清除button.例如下面的附图: 真是不可思议,对于要求日期格式必须选择的情况下,不能清空日期,很不方便.      尽管能够通过手工改动EasyU ...

  9. 大约apache 2.4.X虚拟主机配置问题的版本号后，

    重装系统,习惯性下载最新的wamp2.5,在各种配置,然后一切正常反应.数据库,代码. 然后打开浏览器,尼嘛,幸运的是,昨天,与虚拟域,其实403该. apache error log的信息是:AH0 ...

  10. 组态Log4j(非常具体的)

    来自哪里: http://www.blogjava.net/zJun/archive/2006/06/28/55511.html Log4J的配置文件(Configuration File)就是用来设 ...