原文: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. OS调度算法常用摘要

    一.常见的批处理作业调度 1.先来先服务调度算法(FCFS):就是依照各个作业进入系统的自然次序来调度作业.这样的调度算法的长处是实现简单,公平. 其缺点是没有考虑到系统中各种资源的综合使用情况,往往 ...

  2. Android适应方案汇总（三）

    在Android适应方案汇总(一个).(两)在.我们理解一些基本概念. 那么详细的开发,我们应该重视起来. 首先,我们需要知道.关键的事实是,这两个适配器: (1).这点在单位的使用上用dp.sp以及 ...

  3. javascript 的bind/apply/call性能

    javascript有两种使用频率非常高的三个内置的功能:bind/apply/call.许多技术是基于高点,这些功能实现.这三个功能被用来改变的功能运行环境.从而达到代码复用的目的. 先来所说bin ...

  4. 匿名方法，Lambda表达式，高阶函数

    原文:匿名方法,Lambda表达式,高阶函数 匿名方法 c#2.0引入匿名方法,不必创建单独的方法,因此减少了所需的编码系统开销. 常用于将委托和匿名方法关联,例如1. 使用委托和方法关联: this ...

  5. 实现能够直接粘QQ贴截图的bug管理功能

    对于一个功能强大的协作平台来说,todo管理和bug管理是不可缺少的功能.Todo和bug往往不是通过一些简单的文字就能实现的,有时候须要配以图片的说名,之前用过的项目管理平台都是以附件的形式上传图片 ...

  6. Oracle DG故障诊断一则：alter database recover to logical standby new_logical_dbname卡住

    我们在基于物理standby的基础上搭建逻辑备库过程过程中,在运行: alter database recover to logical standby READDB; 卡住不动,而且alert也没有 ...

  7. json学习初体验--第三者jar包实现bean、List、map创json格式

    1.的需要jar包裹json-lib.jar 下载链接: http://sourceforge.net/projects/json-lib/files/json-lib/ 此包还须要下面的依赖包, c ...

  8. HDU 2012 素性

    素性 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submiss ...

  9. Myeclipse 10/2014 配置插件(svn、maven、properties、velocity)方法

    一.构造SVN具体说明 什么是SVN? 管理软件开发过程中的版本控制工具. 以下会以两种方式来介绍怎么安装svn,myeclipse安装SVN插件步骤.以myeclipse 2014为例,第一种是最常 ...

  10. Windows 8实例教程系列 - 自定义应用风格

    原文:Windows 8实例教程系列 - 自定义应用风格 在Windows 8 XAML实例教程中,曾经提及过应用风格设计方法以及如何创建可复用样式代码.本篇将深入讨论如何创建自定义Windows8应 ...