个人博客：

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 P1122 阶乘 题解

    T组数据,给出N,求出N!最右边非零的数. 对于30%的数据,N <= 30,T<=10. 对于全部的数据,N <= 10^2009,T<=30. 一道数学题 解析 N!/(1 ...

  2. 数据库常用SQL语句（二）：多表连接查询

    前面主要介绍了单表操作时的相关查询语句,接下来介绍一下多表之间的关系,这里主要是多表数据记录的查询,也就是如何在一个查询语句中显示多张表的数据,这也叫多表数据记录的连接查询. 在实现连接查询时,首先是 ...

  3. 使用Nginx实现负载均衡(tomcat集群之后实现交叉访问)

    tomcat集群(多一台服务器),使用nginx实现负载均衡(upstream sina中配置即可):使用上次博客中的sina案例 1.首先再加一个tomcat服务: 2.修改server.xml配置 ...

  4. MySQL-注释-Navicat基本使用-复杂查询练习题-解题思路-pymysql操作数据库-SQL注入-05

    目录 mysql语句注释 navicat 的基本使用 特色(个人总结) 与数据服务器建立连接 创建&打开数据库.表 创建 打开 修改操作表结构 修改表结构 查询修改操作表数据 基本语句对应的操 ...

  5. rpm简单使用

    rpm描述:利用源码包编译成rpm时,会去指定安装好这个包的位置本质:解压,然后拷贝到相关的目录,然后执行脚本 vstpd-3.0.2-9.el7.x86_64.rpm 包名 版本 release 架 ...

  6. 秒杀活动是否适合O2O生鲜行业的思考

    一.命题提出背景 公司是O2O生鲜行业,公司的业务部门提出要做秒杀活动.产品负责人听到后说没意义,秒杀不适合O2O生鲜.(产品负责人据说是阿里出来的P8,后来去微信,去永辉带运营.研发,做大佬,再后来 ...

  7. HDFS原理及操作

    1 环境说明 部署节点操作系统为CentOS,防火墙和SElinux禁用,创建了一个shiyanlou用户并在系统根目录下创建/app目录,用于存放 Hadoop等组件运行包.因为该目录用于安装had ...

  8. 【教程】Bluestacks0.7.9.860以上版3分钟教你摇一摇

    Bluestacks 0.7.9.860 版或以上 , 打开文件夹Win 7 用户 : C:\ProgramData\Bluestacks\UserData\InputMapperWin XP 用户 ...

  9. 安装Winservices服务出现“设置服务登录”

    安装服务时出现  设置服务登录  窗口 别紧张   将serviceProcessInstaller1   Account 设置为LocalSystem 即可

  10. java、python、MYSQL环境安装

    JAVA的环境变量:变量值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;        变量名:JAVA_HOME python的环境变量:变量值:    %PY_HOME ...