通过css的动画属性实现轮播图的显示效果

代码如下:

主体部分:

  1. <div id="move">
  2. <ul>
  3. <li><img src="data:images/1.jpg" alt=""></li>
  4. <li><img src="data:images/2.jpg" alt=""></li>
  5. <li><img src="data:images/3.jpg" alt=""></li>
  6. <li><img src="data:images/4.jpg" alt=""></li>
    <li><img src="data:images/1.jpg" alt=""></li>
        </ul>
    </div>

div作为视窗位置和大小

ul和li作为布局的样式定位到div视窗位置

最后一张图片起到衔接和无缝过渡的效果

css样式部分:

  1. <style>
  2. * {
  3. margin:;
  4. padding:;
  5. }
  6.  
  7. #move {
  8. width: 400px;
  9. height: 300px;
  10. margin: 200px;
  11. border: 4px solid red;
  12. overflow: hidden;
  13. position: relative;
  14. }
  15.  
  16. ul {
  17. width: 2000px;
  18. position: absolute;
  19. left:;
  20. top:;
  21. animation: move 10s ease 0s infinite normal;
  22. }
  23.  
  24. li {
  25. float: left;
  26. }
  27.  
  28. @keyframes move {
  29. 0% {
  30. left: 0px;
  31. }
  32. 25% {
  33. left: -400px;
  34. }
  35. 50% {
  36. left: -800px;
  37. }
  38. 75% {
  39. left: -1200px;
  40. }
  41. 100% {
  42. left: -1600px;
  43. }
  44. }
  45. </style>

如有不足,虚心请教

css动画属性--轮播图效果的更多相关文章

  1. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  2. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  3. 纯CSS实现轮播图效果,你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  4. js原生实现轮播图效果(面向对象编程)

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  5. js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  6. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  7. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  8. 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...

  9. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

随机推荐

  1. 移动端H5通用表单验证插件

    将表单验证的通用部分提炼出来,做成一个简易插件,方便调用. 已将源码放到GitHub上,名字叫zValidate. 手机可扫描下图查看示例,PC端可点击此处查看: 一.原理 1)需要引入zepto.j ...

  2. Java内存管理思维导图

    文 by / 林本托 Tips 做一个终身学习的人. 如果想要成为一名合格的 Java 程序员,就必须要涉及和掌握一些 Java 虚拟机的内部结构和特性.最近在读<深入理解Java 虚拟机> ...

  3. 软件raid 5

    软件raid 5的实现 RAID 5 是一种存储性能.数据安全和存储成本兼顾的存储解决方案. RAID 5可以理解为是RAID 0和RAID 1的折中方案.RAID 5可以为系统提供数据安全保障,但保 ...

  4. 最短路径Floyd算法【图文详解】

    Floyd算法 1.定义概览 Floyd-Warshall算法(Floyd-Warshall algorithm)是解决任意两点间的最短路径的一种算法,可以正确处理有向图或负权的最短路径问题,同时也被 ...

  5. 文件描述符与FILE

    1. 文件描述符(重点) 在Linux系统中一切皆可以看成是文件,文件又可分为:普通文件.目录文件.链接文件和设备文件.文件描述符(file descriptor)是内核为了高效管理已被打开的文件所创 ...

  6. java IO文件操作简单基础入门例子,IO流其实没那么难

    IO是JAVASE中非常重要的一块,是面向对象的完美体现,深入学习IO,你将可以领略到很多面向对象的思想.今天整理了一份适合初学者学习的简单例子,让大家可以更深刻的理解IO流的具体操作. 1.文件拷贝 ...

  7. arcgis api for js入门开发系列十一地图统计图

    上一篇实现了demo的叠加SHP图层,本篇新增地图统计图,截图如下: 地图统计图实现的思路如下:利用拓展arcgis api的js文件(MapChartGraphic.js以及MapChartGrap ...

  8. C#继承的执行顺序

    自己对多态中构造函数.函数重载执行顺序和过程一直有些不理解,经过测试,对其中的运行顺序有了一定的了解,希望对初学者有些帮助. eg1: public class A { public A() { Co ...

  9. nginx 配置https 负载均衡

    1.Winodw安装openssl工具(生成SSL证书用的)免编译版本下载: http://slproweb.com/products/Win32OpenSSL.html 注意:如果openssl在使 ...

  10. iOS 转场动画探究(一)

    什么是转场动画: 转场动画说的直接点就是你常见的界面跳转的时候看到的动画效果,我们比较常见的就是控制器之间的Push和Pop,还有Present和Dismiss的时候设置一下系统给我们的modalTr ...