个人博客：

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. yzoj P2345 战争 题解

    纯数论 30分:纯暴力,直接模拟判断t秒后,判断hp是否小于0 60分: atk>=h,就是一炮一个,那么军队会在min(n,t)秒之后停止攻击,那么总伤害就是a[n+(n-1) +(n-2)+ ...

  2. Collection,泛型,Map

    1.Collection集合 集合和数组的区别? 数组的长度是固定的, 集合的长度是可变的 数组中存储的数据都是同一类型的数据.集合存储的是对象,而且对象的类型可以不一致 集合框架 单列集合 java ...

  3. 一些数组排序算法的简单实现（冒泡、插入、希尔、归并和qsort）

    #include <stdlib.h> #include <string.h> #include "sort.h" //冒泡排序 int bubbleSor ...

  4. 工业控制或办公局域网中的192.168.X.X网段

    IPv4地址分为A.B.C.D.E五类,除去特殊作用的D.E两类,剩下的A.B.C三类地址是我们常见的IP地址段.A类地址的容量最大,可以容纳16777214个主机,B类地址可以容纳65534个主机, ...

  5. Python机器学习笔记：卷积神经网络最终笔记

    这已经是我的第四篇博客学习卷积神经网络了.之前的文章分别是: 1,Keras深度学习之卷积神经网络(CNN),这是开始学习Keras,了解到CNN,其实不懂的还是有点多,当然第一次笔记主要是给自己心中 ...

  6. SpringBoot整合Elasticsearch详细步骤以及代码示例（附源码）

    准备工作 环境准备 JAVA版本 java version "1.8.0_121" Java(TM) SE Runtime Environment (build 1.8.0_121 ...

  7. NLP舞动之中文分词浅析（一）

    一.简介        针对现有中文分词在垂直领域应用时,存在准确率不高的问题,本文对其进行了简要分析,对中文分词面临的分词歧义及未登录词等难点进行了介绍,最后对当前中文分词实现的算法原理(基于词表. ...

  8. Linux MySQL-5.7 root初始密码修改

    操作系统为centos7 64 1.修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2. ...

  9. 实现一个正则表达式引擎in Python(一)

    前言 项目地址:Regex in Python 开学摸鱼了几个礼拜,最近几天用Python造了一个正则表达式引擎的轮子,在这里记录分享一下. 实现目标 实现了所有基本语法 st = 'AS342abc ...

  10. vue报错：[Vue warn]: Do not use built-in or reserved HTML elements as component id: header

    报错的信息大致是不要将内置或保留的HTML元素用作组件ID 解决的办法是修改name符合规范或者直接删除组件内的name属性.