CSS3新特性之animation(纯CSS实现轮播图)

切慕溪水 2019-11-17

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="./css/index.css">
    </head>
    <body >

        <div class="swiper-wrap">
            <ul class="swiper-img">
                这里的<!---->是为了消除每个li换行所带来的间距问题
                <li><img src="./images/1.jpg" alt="" /></li><!--
                --><li><img src="./images/2.jpg" alt="" /></li><!--
                --><li><img src="./images/3.jpg" alt="" /></li><!--
                --><li><img src="./images/4.jpg" alt="" /></li><!--
                --><li><img src="./images/5.jpg" alt="" /></li><!--
                --><li><img src="./images/6.jpg" alt="" /></li>
            </ul>
           

        </div> 
        
        <script src="./js/index.js"></script>
    </body>
</html>

CSS:

body{
    padding: 0;
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
}
.swiper-wrap{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
}
.swiper-wrap li{
    display: inline-block;
}
.swiper-wrap .swiper-img{
    width: 600%;
    height: 100%;
    border: 1px solid darkcyan;
}
.swiper-wrap .swiper-img li{
    width: calc(100%/6);
    height: 100%;
}
.swiper-wrap .swiper-img li img{
    width: 100%;
    height: 100%;
}

/* 切换 */
.swiper-img{
    animation: swiper 12s linear infinite;
}
@keyframes swiper{
    0% { margin-left: 0%;}
    9.1% { margin-left: 0%;}
    18.2% { margin-left: -100%;}
    27.3% { margin-left: -100%;}
    36.4% { margin-left: -200%;}
    45.5% { margin-left: -200%;}
    54.6% { margin-left: -300%;}
    63.7% { margin-left: -300%;}
    72.8% { margin-left: -400%;}
    81.9% { margin-left: -400%;}
    91% { margin-left: -500%;}
    100% { margin-left: -500%;}

}
切慕溪水

切慕溪水

相关推荐

jQuery实现带进度条的轮播图

margin: 0;padding: 0;list-style: none;width: 100%;height: 600px;position: relative;width: 100%;height: 600px;position: absolute;

seoppt / 0评论 2020-09-13

一对一直播源码布局

此功能是否在线均无关紧要。最新注册位于顶部。单击显示的信息进入直播室。第一个轮播与排行榜功能关联。只要建议，它就会显示在这里。其中，男性账户将在此界面上看到“一键式约会”功能。随机匹配机制是：全面考虑推荐锚和流行锚。订单显示在最右边。该区域分为四个主要功能

ggkuroky / 0评论 2020-06-11

纯CSS实现轮播图

天天写前端的你，会自己写一个轮播图吗，而且不能用js哦，知道轮播图的原理吗？今天我们要讲的是如何只用css实现轮播图效果，也叫banner，就是我们经常在APP或网站首页顶部看到的一系列图片切换。就像淘宝官网首页那样：。注意点，由于每次都平移一个手机宽度，

impress / 0评论 2020-05-17

web前端学习之轮播图实现（原生js）

很久前接触过html css js 但自己在工作中用的少，简单的需求直接vue 走起，没有静下心好好写点js css 什么的，现在想要好好学习下 大前端的知识了，第一个小练习，做了个轮播图。网上有很多轮播图的实现过程,每个人都有自己不一样的思路，自己只要实

haohong / 0评论 2020-03-28

jQuery封装的轮播图组件（按需加载）

var img=$.find;//这个img是jQuery对象

小仙儿 / 0评论 2020-03-01

css 纯css轮播图 示例

<canvas id = "canvasId" width = 500 height = 500></canvas>. <script type = "text/javascript"

冰蝶 / 0评论 2020-02-16

纯css3实现轮播图

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

CaiKanXP / 0评论 2020-01-30

微信小程序仿淘宝热搜词在搜索框中轮播功能

逛淘宝的时候，发现淘宝搜索框中一直在垂直方向上轮播热搜提示词，觉得这是个不错的设计，除了能让空间更充分使用，也能让页面更有动感，最重要的是能够增加搜索框的使用频率。就在小程序中试着实现实现。思路比较简单，主要是两点，{ title: "公共号&q

tianping / 0评论 2020-01-21

微信小程序swiper实现文字纵向轮播提示效果

小程序顶部总会看到滚动的通知栏，一般单条的都会用跑马灯去实现，但面对多条的内容，就需要用轮播去实现，轮播自然是swiper了，查了查，还真有vertical这个属性，swiper真好用。{ title: "公共号" },以上所述是小编给

资源分享 / 0评论 2020-01-21

android实现轮播图（从互联网上寻找图片）

//设置内置样式，共有六种可以点入方法内逐一体验使用。//设置是否为自动轮播，默认是“是”。//设置指示器的位置，小点点，左中右。//以上内容都可写成链式布局，这是轮播图的监听。//必须最后调用的方法，启动轮播图。

安辉 / 0评论 2020-01-08

轮播图的实现

--<el-carousel-item>- 前端图片展示->

csm0 / 0评论 2020-01-06

Jquery基础（动画效果的轮播图特效）

var python = allLis.filter; //返回带有类名 " python‘"

81463166 / 0评论 2020-01-04

Android轮播图实现详细过程

-- if you want to load images from the internet -->. -- if you want to load images from a file OR from the internet -->

绿豆饼 / 0评论 2019-12-10

jQuery实现轮播图效果

使用jQuery实现轮播图，废话不多说，直接上代码了。其中，图片和路径是我电脑中的，你需要自己准备好图片，然后写你自己图片的路径。我这里的jQuery库版本是jquery-1.12.4。

83570690 / 0评论 2019-11-26

Jquery淡入淡出轮播图

　　　　<li><a href="javascript:;"><img src="./1 .png" /></a></li>

tthappyer / 0评论 2019-12-02

jquery图片轮播

jquery图片轮播插件easyslider，使用简单方便，只有一个js文件和一个css文件，下载文件夹下面的ds_store 文件不影响使用，可以删除。/**其他配置项：numeric: true，//数字显示图片次序nextId: "slid

83453065 / 0评论 2013-09-15

一百三十二：CMS系统之前端动态获取后台添加的轮播图

{% for banner in banners %} 　　{% if loop.first %} 　　　　<div class="item active"> 　　{% else %} 　　　　<div class

bowean / 0评论 2019-12-01

SaCa DataViz 企业版|移动端 APP

移动端 APP 可以帮助客户及时查看发布的图册和图表，随时关注数据的变化、洞察发展的趋势，高效辅助企业决策。在官网中下载APP官网：www.idataviz.com成功安装到移动端，配置网络环境，登录即可查看发布的图册和图表。

welldum / 0评论 2019-11-19

jQuery实现轮播图及其原理详解

<!DOCTYPE html>. <meta charset="utf-8" name="viewport" content="width=device-width,initial-sca

yyzhu / 0评论 2018-08-16

css3实现轮播1

图片轮播，鼠标移入后轮播暂停，移除后轮播继续。利用Css3animation动画属性，用transform 实现图片移动。通过图片复制备份，实现的图片的无缝衔接。Safari 和 Chrome 支持 @-webkit-keyframes 规则。动画持续时间

jiedinghui / 0评论 2019-10-28

图片轮播插件slideBox

<script type="text/javascript" src="<%=path%>/assets/js/jquery-1.8.2.min.js"></script>. &l

wbbott / 0评论 2015-03-19

jQuery 简易实用banner轮播图

banner轮播图是几乎每个前端都会使用到的功能，无论你是自己用javascript写还是直接用jQuery插件，一定不会陌生。但是网上各种插件是五花八门，什么花俏的功能都有，但有时候我们只需要一个简单的，只包含最少功能的banner，却很难找到。一个好的

仲崇峰 / 0评论 2016-11-29

jQuery eislideshow 图片轮播

轮播间隔时间，单位毫秒。标题滑动动画时间

yFifhting / 0评论 2017-02-08

jquery banner 轮播

Banner可以作为网站页面的横幅广告，也可以作为活动时用的标识，还可以是报纸杂志上的大标题。Banner主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。在以往很多项目中主要体现在首页、登录页中对客户的提供的图片进行展示，本文档主要介绍基本的使用

小源丶同学 / 0评论 2017-03-10

基于jQuery图片轮播

最近用到了图片轮播，经过测试后找到个不错的轮播代码。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片，控制点击事件时的宽度变化

XiaoSpring / 0评论 2017-07-26

jQuery实现带3D切割效果的轮播图功能示例【附源码下载】

本文实例讲述了jQuery实现带3D切割效果的轮播图。分享给大家供大家参考，具体如下：。这是一个使用css3+jQuery实现的轮播图效果，以前还没接触css3时，觉得效果挺酷炫的，但是实现挺复杂的，今天研究了一下，发现特别简单，稍微动用一下空间想象力就好

LinAo / 0评论 2019-04-04

解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题

前几天在工作的过程中，在数据渲染的时候，发生了swiper那一部分的轮播图不在滚动，手动滑动也没有效果。一直感觉数据开始渲染，是不是数据渲染的时候，并没有生成swiper的节点呢。后来第一感觉就是把控制swiper轮播的函数放在初始化事件中去，其实这也不能

dongnaosenlu / 0评论 2018-09-27

swiper在angularjs中使用循环轮播失效的解决方法

通过查询了资料，发现swiper和angularjs执行的机制是不同的，swiper的机制是：初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块，则允许滑动多少个块。而在angular始终在swiper初始化之后定义，

学而思之 / 0评论 2018-09-27

微信小程序轮播组件

若本号内容有做得不到位的地方，请及时联系我们进行整改即可，会在第一时间进行处理。因为你们的赞同/鼓励是我写作的最大动力！欢迎关注达叔小生的简书！

klshige / 0评论 2019-08-25

jQuery插件--web端轮播图

</script>cssJS代码;(function ($, window, document, undefined) {

Element张冰 / 0评论 2019-07-01

原生js + css3 + 定时器 无缝轮播图（部分）

现在自学前端中，学到移动端，在做一个项目，课程开始用原生的方法写轮播图（无缝），但是视频讲的是面向过程的方式，现在自己用面向对象的方式写一下。

zyhui / 0评论 2019-07-01

关于Vue中Swiper图片加载问题

有时我们在vue组件中使用swiper，而swiper中的图片是ajax获取的，会导致轮播图中只有第一张具有轮播图效果，这是因为ajax获取数据是异步的，所以new swiper（）会先执行，等到ajax数据获取之后，dom重新渲染，但是此时swiper早

小傻 / 0评论 2019-06-28

《第31天：JQuery - 轮播图》

写这篇文章，当做是对自已这一天的一个总结.写轮播图要准备的东西：三张尺寸大小一样的图片.分为三个模块：HTML模块，CSS模块，Jquery模块。<script type="text/javascript" src="j

yaodilu / 0评论 2019-06-28

纯css轮播(焦点)

&lt;title&gt;飛天网事--纯CSS代码实现图片轮播&lt;/title&gt;&lt;metaname="keywords"content="飛天网事，WEB前端开发，HTM

cfang00 / 0评论 2017-09-20

基于jQuery图片轮播

最近用到了图片轮播，经过测试后找到个不错的轮播代码。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片，控制点击事件时的宽度变化

82483564 / 0评论 2017-07-26

JavaScript设计模式-原型模式

原型模式原型模式：用原型实例指向创建对象的类，使用于创建新的对象的类共享原型对象的属性以及方法。为了提高性能，我们需要一种共享机制。原型模式就是将可复用的，可共享的、耗时大的从父类中提出来，然后放在其原型中，然后通过组合继承或者寄生组合式继承将方法和属性继

baohuanlove / 0评论 2019-06-28

jquery banner 轮播

1 概述Banner可以作为网站页面的横幅广告，也可以作为活动时用的标识，还可以是报纸杂志上的大标题。Banner主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。在以往很多项目中主要体现在首页、登录页中对客户的提供的图片进行展示，本文档主要介绍基

无情 / 0评论 2017-03-10

jQuery eislideshow 图片轮播

在线实例基础演示自动播放使用方法<divid="ei-slider"class="ei-slider"><ulclass="ei-slider-large"><li&

jiabinxu / 0评论 2017-02-08

jQuery 简易实用banner轮播图

banner轮播图是几乎每个前端都会使用到的功能，无论你是自己用javascript写还是直接用jQuery插件，一定不会陌生。

81423067 / 0评论 2016-11-29

jQuery轻量级响应式图片轮播插件ResponsiveSlides.js

它支持包括IE6在内的几乎所有的浏览器，在IE6中还支持最大宽度属性，但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。浏览器支持：Internet Explorer 6,7,8,9Firefox 3,6,8,11Saf

mapdigit / 0评论 2016-10-27

小清新的jQuery 幻灯片jQuery ck-slide 图片轮播

ck_slide 是一款小清新的jQuery 幻灯片插件，它非常小巧，压缩后仅 3KB，基本功能可以满足。它支持淡入淡出/左右滚动、箭头/圆点控制、自动播放。在线实例默认左右滚动自动播放使用方法<divclass="ck-slide&quo

pplxh / 0评论 2016-09-07

8种效果实例-jQuery anoSlide 焦点图轮播

anoslide是一款可调节效果至任意宽度大小,支持图文混合内容显示的图片轮播插件。

83500391 / 0评论 2016-09-05

jQuery eislideshow 图片轮播

在线实例基础演示自动播放使用方法<divid="ei-slider"class="ei-slider"><ulclass="ei-slider-large"><li&

89387341 / 0评论 2016-08-13

DOM 事件模型2:阻止冒泡,popover,轮播BUG解决

DOM 事件模型2:阻止冒泡,popover,轮播BUG解决1从popover理解冒泡与捕获。当几个DIV嵌套,触发事件时,是先进行捕获阶段的触发,再进行冒泡阶段的触发的.例如一个popover的例子想要的效果是点击别处关闭浮层如图:. 加上debugge

DolphinThinker / 0评论 2019-06-28

15款jQuery带缩略图的图片轮播切换特效代码

JQuery宽屏电影大图幻灯片轮播切换代码。jquery带文字缩略图的图片轮播切换代码。jquery图片滑动切换效果左右按钮控制图片滑动轮播切换效果。jQuery幻灯片插件可自动轮播和暂停的图片幻灯片代码。原生js图片插件缩略图片控制大图淡出淡进切换支持图

87493063 / 0评论 2015-11-19

js、jQuery实现文字上下无缝轮播、滚动效果

因项目需要实现消息通知上下无缝轮播的效果，所以写了一下，在这个分享出来，希望再次遇到此需求的道友，可以直接拷贝来用，节约一点不必要的时间。

人心 / 0评论 2019-06-27

用状态机写轮播

刚刚的轮播用具体思维做，因为不知道它有哪几种状态，就一步步来做，等效果做出来后，哪几种状态，一目了然。下面就用抽象思维做一遍.图片出现在视窗状态，我用 current 表示图片离开视窗状态，我用 leave 表示图片准备进入视窗状态，我用 enter 表示

benjonc / 0评论 2019-06-27

用 jQuery 做个轮播

初次体验jQuery 之后，体验一下jQuery强大之处，做一个简单的轮播，实现图片切换。点击按钮切换轮播页面上面有三个img标签用两个div便签包裹好，class=images是用来布局的，一般不在布局的标签上面做任何操作，class=window是用来

Jensony / 0评论 2019-06-27

图片轮播插件slideBox

<script type="text/javascript" src="<%=path%>/assets/js/jquery-1.8.2.min.js"></script>. &l

sprita / 0评论 2015-03-19