CSS3图片轮播效果-阿里云开发者社区

开发者社区> 杰克.陈> 正文

CSS3图片轮播效果

简介: 原文:CSS3图片轮播效果   在网页中用到图片轮播效果,单纯的隐藏、显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间。css3的出现,让动画变得不再是问题,而且简单易用。
+关注继续查看
原文: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>
View Code

  点击下面的两个按钮,就会出现轮播效果:

  css3的出现真的给前端开发者(特别是像我这样的初级者)带来很多好处,以前要制作一些动画,用flash或者用js写一大堆代码才能实现,现在的css3可能就用简单几行代码加上简单的的几行js代码就能实现。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
7种鼠标悬停效果,多样的图片说明展示
  今天我们要为您展示如何创建一些简单又不失时尚的图片说明悬停效果。我们的想法应用悬停效果来显示图片对应的标题,作者和链接按钮。对于一些的效果,我们将使用3D变换。这样做的目的是保持奇妙的效果,并为许多不同的变化提供了灵感。
632 0
jquery动画 -- 4.升级版遮罩效果的图片走廊--带自动运行效果
  我将上一章中了插件做了个小小的升级,实现了自动运行效果,完整代码大家见demo。    主要的变化点有:把‘下一条’、‘上一条’的click事件抽象到一个函数showNext中。添加setInterval,添加selector元素的hover事件。
909 0
巧用CSS3滤镜实现图片不同渲染效果
本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了css3的filter滤镜。 CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。
1023 0
写一个图片轮播效果的Demo(自动播放)附代码
js图片轮播切换 .imgCon { width: 450px; height: 300px;...
806 0
css毛玻璃效果
#left:before{ position: relative; z-index: -1; filter: blur(20px); background-color: #FFFFFF; } #left{ /*bo...
807 0
Java 图片添加水印效果
package com.xiaowu.drawwater.demo; import java.awt.AlphaComposite; import java.awt.Graphics2D; import java.
998 0
+关注
杰克.陈
一个安静的程序猿~
9798
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
《SaaS模式云原生数据仓库应用场景实践》
立即下载
文娱运维技术
立即下载
《看见新力量:二》电子书
立即下载