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

代码如下:

主体部分:

<div id="move">
<ul>
<li><img src="data:images/1.jpg" alt=""></li>
<li><img src="data:images/2.jpg" alt=""></li>
<li><img src="data:images/3.jpg" alt=""></li>
<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样式部分:

<style>
* {
margin:;
padding:;
} #move {
width: 400px;
height: 300px;
margin: 200px;
border: 4px solid red;
overflow: hidden;
position: relative;
} ul {
width: 2000px;
position: absolute;
left:;
top:;
animation: move 10s ease 0s infinite normal;
} li {
float: left;
} @keyframes move {
0% {
left: 0px;
}
25% {
left: -400px;
}
50% {
left: -800px;
}
75% {
left: -1200px;
}
100% {
left: -1600px;
}
}
</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. 2017·iOS学习资料

    我的两个想法更新了,欢迎新老司机出来槽点一下 star →[iOS·UIKit & Foundation框架-Annotations & Category注解工具类

  2. Python中Swithch Case语法实现

    而python本身没有switch语句,解决方法有以下3种:A.使用dictionaryvalues = { value1: do_some_stuff1, value2: do_some_stuff ...

  3. Spring学习(4)---Bean基础

    Bean配置项 Bean的作用域 Bean的生命周期 Bean的自动装配 Resources & ResourceLoader (一) Bean配置项 常用的配置项 Id   (IOC容器中B ...

  4. Dom 简介

    HTML DOM 简介 DOM 教程 DOM 节点 HTML DOM 定义了访问和操作 HTML 文档的标准. 您应该具备的基础知识 在您继续学习之前,您需要对以下内容拥有基本的了解: HTML CS ...

  5. iptables 基本用法

    iptables 1.iptables 表 (1)介绍常用表 filtert(过滤器) 链 ↓ INPUT chain:控制进入主机的数据包 OUTPUT chain:控制向外发出的数据包 FORWA ...

  6. read命令读取用户输入

    read命令用于从终端或文件中读取用户输入,它读取整行输入,如果没有指定名称,读取的行被赋值给内部变量REPLY.read命令常用选项:-a,-p,-s,-t,-n 1.REPLY变量 $readhe ...

  7. 多线程并发执行任务,取结果归集。终极总结:Future、FutureTask、CompletionService、CompletableFuture

    目录 1.Futrue 2.FutureTask 3.CompletionService 4.CompletableFuture 5.总结 ================正文分割线========= ...

  8. Jexus部署.Net Core项目

    Jexus Jexus 即 Jexus Web Server,简称JWS,是Linux平台上 的一款ASP.NET WEB服务器.它是 Linux.Unix.FreeBSD 等非Windows系统架设 ...

  9. [iOS]从零开始开发一个即时通讯APP

    前言 这是我的毕业设计.刚开始确定这个课题的时候是因为以前有稍微研究过一些XMPP协议,在这个基础上做起来应该不难.然后开始选技术的时候还有半年,我想为什么不从更底层做起呢!那就不用XMPP,当时接触 ...

  10. 传输层socket通讯之java实现

    使用流套接字来示例一个客户/服务器的应用.客户端的应用连接到服务器上面,服务端的应用发送数据到客户端,然后客户将收到的数据显示出来. 服务端代码: package socket; import jav ...