原文: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. swift－辞典NSDictionary定义,变化的关键,删/加入关键

    // Playground - noun: a place where people can play import UIKit //--------------------------------- ...

  2. Ext JS4百强应用: 做可编辑的,可checked的treegrid--第11强

    做一个可编辑的,可checked的treegrid,代码相当简洁: 请看代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&quo ...

  3. SessionA和pplication网上聊天室的网络范例

    login.aspx码,如以下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...

  4. BootStrap布局案例

    BootStrap布局 bootstrap 2.3版与3.0版的使用区别 http://www.weste.net/2013/8-20/93261.html 以一个博客系统的首页,来介绍如何布局 1, ...

  5. JDK源码学习系列01----String

                                                     JDK源码学习系列01----String 写在最前面: 这是我JDK源码学习系列的第一篇博文,我知道 ...

  6. 【C语言探索之旅】 第二部分第六课：创建你自己的变量类型

    内容简介 1.课程大纲 2.第二部分第六课: 创建你自己的变量类型 3.第二部分第七课预告:   文件读写 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C ...

  7. ef添加字段

    先在实体类里添加字段 ,然后执行 Add-Migration updateNumberOfLikes Update-Database -Verbose

  8. jQuery 完成ajax传jsonObject数据，并在后台处理

    效果图: 1.js文件封装的几个js工具 <span style="font-family:KaiTi_GB2312;font-size:18px;">//兼容ie i ...

  9. c++日历v1.12版

    ////////////////////////////新增信息修改功能,未完善. #include<iostream> #include <string> #include& ...

  10. int a[5]={1,2,3,4,5};printf(&quot;%d\n&quot;, *((int*)(&amp;a+1)-2);

    有说服力的笔试题有一定的期限,问:什么是结果,答案是4,为什么要挤? 我明白(不知道是不正确): &a这是一个数组指针,类型int[5],然后&a添加1其实a+sizeof(int)* ...