这是我上一次的面试题、一晃两个月过去了。

从前都是拿原理骗人，把怎么实现的思路说出来。

我今天又被人问到了，才想起来真正码出来。码出来效果说明一切：

以上gif，只用到了5张图片，一个html+css，没有任何js。然后实现了自动轮播效果。

具体代码如下：
结构布局

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>css实现轮播图</title>

  <link rel="stylesheet" href="./style.css">

</head>

<body>

  <div class="my-swiper">

    <ul class="swiper-list">

      <li class="swiper-slide swiper-slide1">

        <a href="javascript:;">

          <img src="./img/img01.jpg" alt="">

        </a>

      </li>

      <li class="swiper-slide swiper-slide2">

        <a href="javascript:;">

          <img src="./img/img02.jpg" alt="">

        </a>

      </li>

      <li class="swiper-slide swiper-slide3">

        <a href="javascript:;">

          <img src="./img/img03.jpg" alt="">

        </a>

      </li>

      <li class="swiper-slide swiper-slide4">

        <a href="javascript:;">

          <img src="./img/img04.png" alt="">

        </a>

      </li>

      <li class="swiper-slide swiper-slide5">

        <a href="javascript:;">

          <img src="./img/img05.gif" alt="">

        </a>

      </li>

    </ul>

    <div class="pagination">

      <span class="dot"></span>

      <span class="dot"></span>

      <span class="dot"></span>

      <span class="dot"></span>

      <span class="dot"></span>

      <span class="dot active"></span>

    </div>

  </div>

</body>

</html>

除去普通布局样式后的 css核心代码:

.swiper-list {

  animation: swiper 10s steps(1, end) infinite;

}
/* 橙色小圆点 */

.dot.active {

  animation: swiper-dot 10s steps(1, end) infinite;

}

思路：

首先说五张图片轮播

因为是五张图片左浮动展示。所以只需要左移ul的left值即可。借助animation的关键帧，每隔2秒切换一下left的位置。0%和100%关键帧时重合，

加上animation-iteration-count: infinite；实现循环播放。

其次说小圆点自动切换位置：
我的思路是，五个小白点。第六个是橙色点。同样借助animation关键帧，切换第六个橙色点的位置即可。

【赶工，制作比较粗糙，位置对的不太准。但是思路在这里。抛砖引玉，希望可以激发大家更多的实现想法。欢迎评论不足之处~】

源码地址：

https://github.com/xingorg1/jsStudy/tree/master/css实现轮播图

2019-04-17 21:10:07~

css3 - 纯css实现一个轮播图的更多相关文章

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

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

  2. 纯HTML和CSS实现JD轮播图

    博主使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识.  ,如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体,这里没有使用). <!DOCTYPE ...

  3. 利用CSS3实现图片无间断轮播图的实现思路

    前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...

  4. jquery里面的attr和css来设置轮播图竟然效果不一致

    /*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...

  5. jQ实现的一个轮播图

    众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...

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

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

  7. CSS3——animation的基础（轮播图）

    作为前端刚入门的小菜鸟,只想记录一下每天的小收获 对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的 ...

  8. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  9. 纯CSS 多图片轮播

    今天做东西的时候,遇到一个问题关于图片轮播的问题,以前也接触过(百度 人家的demo改改..),再次遇到这个问题的时候,根据以前的印象找到了demo正信心满满的准备改一下嵌进去,发现 jquery.m ...

随机推荐

  1. quepy

    A python framework to transform natural language questions to queries in a database query language. ...

  2. Mac删除默认美国输入法

    1.打开sudo open ~/Library/Preferences/com.apple.HIToolbox.plist 2.找到这个,然后点击删除,最后保存,然后在立马重启 3.如果要还原,直接在 ...

  3. Redis的快照持久化-RDB与AOF

    Redis持久化功能 Redis为了内部数据的安全考虑,会把本身的数据以文件形式保存到硬盘中一份,在服务器重启之后会自动把硬盘的数据恢复到内存(redis)的里边. 数据保存到硬盘的过程就称为“持久化 ...

  4. Django根据现有数据库建立/更新model

    Django引入外部数据库还是比较方便的,步骤如下: 创建一个项目,修改seting文件,在setting里面设置你要连接的数据库类型和连接名称,地址之类,和创建新项目的时候一致 运行下面代码可以自动 ...

  5. 找回Android studio的帮助文档

    对于业余写点小程序,自娱自乐的我来说,写程序过程的帮助文档非常重要,毕竟不是专业人士.用Visual Studio时,习惯于光标一移到一个类或对象上面,马上出现相应的帮助文档(如图) studio的帮 ...

  6. JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  7. POSIX 线程的创建与退出

    前言 创建线程: pthread_create() 退出线程: pthread_exit()return pthread_cancel() 线程的创建 使用多线程,首先就需要创建一个新线程.那么线程是 ...

  8. mina websocket 粘包、断包、（丢包）解决心得

    被这3个(其实是2个)问题坑惨了,目前没发现存在丢包问题,之前认为的丢包问题事实是不存在的. 粘包和断包的情况是存在的,这两个问题不怕,只要发送接收到的数据包顺序没有被打乱颠倒,一切都好办. 容易掉的 ...

  9. 戳破ZigBee技术智能家居的谎言！

    戳破ZigBee技术智能家居的谎言 一.ZigBee介绍 简介 在蓝牙技术的使用过程中,人们发现蓝牙技术尽管有许多优点,但仍存在许多缺陷.对工业,家庭自动化控制和遥测遥控领域而言,蓝牙技术显得太复杂, ...

  10. HDU 5095--Linearization of the kernel functions in SVM【模拟】

    Linearization of the kernel functions in SVM Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: ...