个人博客：

http://mcchen.club

纯CSS3实现模拟焦点轮播效果，支持JQ等扩展各项功能。废话少说，直接贴代码。

 <!DOCTYPE html>

 <html>

 <head>

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

     <meta name="format-detection" content="telephone=no"/>

     <meta name="apple-mobile-web-app-capable" content="yes"/>

     <meta charset="UTF-8">

     <title>纯CSS焦点轮播</title>

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

 </head>

 <body>

     <div class="focus_img">

         <ul class="img_list">

             <li><img src="data:images/swape1.jpg" alt=""/></li>

             <li><img src="data:images/swape2.jpg" alt=""/></li>

             <li><img src="data:images/swape3.jpg" alt=""/></li>

             <li><img src="data:images/swape4.jpg" alt=""/></li>

             <li><img src="data:images/swape5.jpg" alt=""/></li>

         </ul>

         <ul class="img_index">

             <li class="one">1</li>

             <li class="two">2</li>

             <li class="three">3</li>

             <li class="four">4</li>

             <li class="five">5</li>

         </ul>

     </div>

 </body>

 <script src="js/jquery-1.11.3.js"></script>

 <script src="js/index.js"></script>

 </html>

接下来是样式代码

 body {  background-color: #f0f0f0;  }

 .focus_img { position: relative; height: 300px; width: 500px; overflow: hidden; margin: auto; border: solid 2px #000000;

   ul { position: absolute;  }

   .img_list { top:; left:; -webkit-animation: img_list 10s 2s infinite;

     li { width: 500px; height: 300px; overflow: hidden;

       img { height: 300px; width: 500px;}

     }

   }

   .img_index { bottom: 10px;right: 10px;

     li {float: left; width: 16px; height: 16px; border: solid 1px #cccccc; background-color: #ffffff; color:#000000; text-align: center;line-height: 16px;overflow: hidden;cursor: pointer;margin-right: 2px;  }

     .one { background-color: #000000; color: #ffffff; -webkit-animation: one 10s 2s infinite;}

     .two { -webkit-animation: two 10s 2s infinite;}

     .three {-webkit-animation: three 10s 2s infinite;}

     .four {-webkit-animation: four 10s 2s infinite;}

     .five {-webkit-animation: five 10s 2s infinite;}

   }

 }

 @-webkit-keyframes img_list {

   0%{ -webkit-transform: translate(0,0);}

   10%,20% {-webkit-transform: translate(0,-300px);}

   30%,40% {-webkit-transform: translate(0,-600px);}

   50%,60% {-webkit-transform: translate(0,-900px);}

   70%,80% {-webkit-transform: translate(0,-1200px);}

   90%,100% {-webkit-transform: translate(0,0);}

 }

 @-webkit-keyframes one {

   10%,20%,30%,40%,50%,60%,70%,80%{ background-color: #ffffff; color: #000000;}

   0%,90%,100%{ background-color: #000000;color: #ffffff;}

 }

 @-webkit-keyframes two {

   0%,30%,40%,50%,60%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;}

   10%,20%{ background-color: #000000;color: #ffffff;}

 }

 @-webkit-keyframes three {

   0%,10%,20%,50%,60%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;}

   30%,40%{ background-color: #000000;color: #ffffff;}

 }

 @-webkit-keyframes four {

   0%,10%,20%,30%,40%,70%,80%,90%,100%{ background-color: #ffffff; color: #000000;}

   50%,60%{ background-color: #000000;color: #ffffff;}

 }

 @-webkit-keyframes five {

   0%,10%,20%,30%,40%,50%,60%,90%,100%{ background-color: #ffffff; color: #000000;}

   70%,80%{ background-color: #000000;color: #ffffff;}

 }

最后是效果图

欢迎交流指正，谢谢！

纯CSS焦点轮播效果-功能可扩展的更多相关文章

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

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

  2. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  3. 纯css实现轮播图

    轮播图的实现原理其实是比较简单的 举个例子 <div class="main"> <div class="div-main"></ ...

  4. 纯css实现轮播(渐变式 less语法)

    下载:https://pan.baidu.com/s/181GkM0EdM5NSqnUcecMS4Q 预览

  5. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  6. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  7. 纯 CSS 实现滑动轮播图效果

    只使用css实现轮播图简单的操作 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  8. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  9. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

随机推荐

  1. 中南林业科技大学第十一届程序设计大赛 有趣的二进制 牛客网 java大数的一些方法

    链接:https://www.nowcoder.com/acm/contest/124/C来源:牛客网 题目描述 小新在学C语言的时候,邝老师告诉他double类型的数据在表示小数的时候,小数点后的有 ...

  2. NOIP 2016 蚯蚓 题解

    一道有趣的题目,首先想到合并果子,然而发现会超时,我们可以发现首先拿出来的切掉后比后拿出来切掉后还是还长,即满足单调递增,故建立三个队列即可. 代码 #include<bits/stdc++.h ...

  3. 关于格林尼治时间(GMT)和DateTime相互转换的分享

    普及一下什么是格林尼治时间? 世界时UT即格林尼治 平太阳时间,是指格林尼治所在地的标准时间,也是表示地球自转速率的一种形式.以地球自转为基础的时间计量系统.地球自转的角度可用地方子午线相对于地球上的 ...

  4. fremark遍历出的li怎么加事件（cforeach循环遍历也同样适用）

    遇见这个问题烦了好久好久,网上也没找到答案,琢磨了半天终于找到了方法 1.下面是一个分页信息遍历添加事件,页面跳转 <!-- 分页条信息 --> <div class="c ...

  5. Winform中实现ZedGraph的多条Y轴(附源码下载)

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  6. Mysql - 高可用方案之MHA

    一.概述 本文将介绍mysql的MHA(Master High Availability)方案,官方文档地址:https://github.com/yoshinorim/mha4mysql-manag ...

  7. 学生管理系统——ArrayList集合

    此学生管理系统利用了集合ArrayList实现了对学生的增删改查:利用数组中的方法实现分数排序:运用String类的equals实现登录功能的字符串比较. 管理员类: package data; pu ...

  8. Cabloy-CMS：动静结合，解决Hexo痛点问题

    介绍 Cabloy-CMS是什么 Cabloy-CMS是基于CabloyJS全栈业务开发框架开发的"动静结合"的CMS,可以快速构建企业网站.博客.社区.商城等Web应用. 在线演 ...

  9. mysql集群基于docker 在centos上

    新博客https://blog.koreyoshi.work/ mysql集群(PXC)基于docker 在centos上 常用设计方案 Replication(复制) 速度快 弱一致性 低价值 场景 ...

  10. [Advanced Python] 14 - "Generator": calculating prime

    高性能编程 几个核心问题 • 生成器是怎样节约内存的?• 使用生成器的最佳时机是什么?• 我如何使用 itertools 来创建复杂的生成器工作流?• 延迟估值何时有益,何时无益? From: htt ...