原文: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. android AIDL RPC 机制

    AIDL 这是接口文件的叙述性说明,为了实现android 上述平台RPC ,aapt 在编译时自己主动按照该规则IPC 的接口和对象,作为一个用户只需要 实现在服务侧的界面 2 在clientbin ...

  2. jquey :eq(1)

    $("#div_Goods .datagrid-row .numberbox:eq(1)") $("#div_Goods .datagrid-row .numberbox ...

  3. 搬寝室 hdu

    Problem Description 搬寝室是很累的,xhd深有体会.时间追述2006年7月9号,那天xhd迫于无奈要从27号楼搬到3号楼,因为10号要封楼了.看着寝室里的n件物品,xhd开始发呆, ...

  4. JSP-简单的练习省略显示长字符串

    <%@ page contentType="text/html; charset=gb2312" %> <!-- JSP指令标签 --> <%@ pa ...

  5. define a class for a linked list and write a method to delete the nth node.

    1.问题 define a class for a linked list and write a method to delete the nth node. 2.算法 template <t ...

  6. Java NIO框架Netty课程（一） – Hello Netty

    首先啰嗦2,假如你不知道Netty怎么办怎么办.它可以是一个简单的搜索,找出.我只能说Netty是NIO该框架,它可用于开发分布式Java计划.详细情况可以做,我们可以尝试用你的想象力. 技术,它是服 ...

  7. SQL中IN,NOT IN,EXISTS,NOT EXISTS的用法和差别

    SQL中IN,NOT IN,EXISTS,NOT EXISTS的用法和差别: IN:确定给定的值是否与子查询或列表中的值相匹配. IN 关键字使您得以选择与列表中的任意一个值匹配的行. 当要获得居住在 ...

  8. T-SQL中default值的使用

    今天介绍一下通过T-SQL语句来创建表时使用default的关键字来自动使用默认值,这个关键字和其它的如:identity,primary key ,not null ,unique等不是相同,这里简 ...

  9. 【Android进阶】关于PagerAdapter的使用方法的总结

    PagerAdapter简介 PagerAdapter是android.support.v4包中的类,它的子类有FragmentPagerAdapter, FragmentStatePagerAdap ...

  10. eclipse报错：发现了以元素 'd:skin' 开头的无效内容。此处不应含有子元素

    Console报错: sdk\system-images\android-22\android-wear\armeabi-v7a\devices.xml cvc-complex-type.2.4.d: ...