原文: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. Ubuntu下安装vmware 9.0 + 注册码

    先附上一些注册码到时使用: NA0UF-DUH00-QZHM0-MU17K-CC824 4F469-F024Q-CZ8R9-DL1N0-13C6W HF261-0HL40-FZX21-F9AQ2-0C ...

  2. Oracle SQL Lesson (10) - 使用DDL语句创建和管理表

    数据库对象TableViewSequenceIndexSynonym 对象名称最长30个字符,不能与当前用户下其他对象重名.create table "select" as sel ...

  3. VS2010不能编译SQLServer2005的Microsoft.SQLServer.ManagedDTS.dll的解决方法

    VS2010不能编译SQLServer2005的Microsoft.SQLServer.ManagedDTS.dll是最近碰到的一个疑难杂症问题,通过查询微软社区和一些英文资料找到了解决方法,同事说之 ...

  4. Asp.net 视频摘要

    Asp.net一遍又一遍视频最近,例如中,大多数的实现.由于原因的版本号,.当然学过是学过.总结不可缺少. 先宏观后微观.刚学完,感觉知识特别乱,所以先画了张图: watermark/2/text/a ...

  5. Oracle使用并行建索引须要注意的问题

    建索引时.我们为了建索引快.会加上并行,加上并行之后.此列索引就会是并行了. 訪问有并行度的索引时,CBO可能可能会考虑并行运行.这可能会引发一些问题,如在server资源紧张的时候用并行会引起更加严 ...

  6. 191. Number of 1 Bits Leetcode Python

    Write a function that takes an unsigned integer and returns the number of '1' bits it has (also know ...

  7. CentOS 5 安装Oracle10g

    原创作品.离 "深蓝的blog" 博客.欢迎转载.转载时请务必注明下面出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlon ...

  8. Android学习路径（两）项目文件本身使用场景和文件演示

    ios讨论群1群:135718460  1.src文件:java源码存放文件夹 2.gen 文件:自己主动生成全部由android开发工具自己主动生成的文件,文件夹中最重要的就是R.java文件,这个 ...

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

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

  10. 作为一个新人，如何学习嵌入式Linux？

    作为一个新人.如何学习嵌入式Linux?我一直在问太多次,特写文章来回答这个问题. 在学习嵌入式Linux之前.肯定要有C语言基础.汇编基础有没有无所谓(就那么几条汇编指令,用到了一看就会).C语言要 ...