个人博客：

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. MySql连接笔记

    一.内连接查询  inner join 关键字:inner  join   on 语句:select * from a_table a inner join b_table b on a.a_id = ...

  2. java学习笔记之基础篇

    java选择语句之switch   //switch可以用于等值判断 switch (e) //int ,或则可以自动转化成int 的类型,(byte char short)枚举jdk 7中可以防止字 ...

  3. 明明有class为什么还是报ClassNotFoundException？

    描述 我们修改接口时,习惯发布一个快照版本用于测试.我们的一个服务也是发布了快照版本,然后一个jar程序要依赖这个服务,修改pom文件打包部署后,通过 java -jar 命令执行这个jar程序,然后 ...

  4. Dijkstra算法详细(单源最短路径算法)

    介绍 对于dijkstra算法,很多人可能感觉熟悉而又陌生,可能大部分人比较了解bfs和dfs,而对dijkstra和floyd算法可能知道大概是图论中的某个算法,但是可能不清楚其中的作用和原理,又或 ...

  5. android 实现 波纹效果+图片左右无限滑动缩放效果

    项目中用到的 ,记录下.说不定下次又用到了.就提取出来了. 录制效果一般,将就看吧.代码地址如下 https://yunpan.cn/ckQaXMpYwdUnn (提取码:7ac7)

  6. MYSQL之查询篇

    2. 数据库操作 数据库在创建以后最常见的操作便是查询 2.1 查询 为了便于学习和理解,我们预先准备了两个表分别是stduents表和classes表两个表的内容和结构如下所示 students表的 ...

  7. Day 15 文件打包与压缩

    1.什么是文件压缩? 将多个文件或目录合并成为一个特殊的文件.比如: 搬家...脑补画面 img. 2.为什么要对文件进行压缩? 当我们在传输大量的文件时,通常都会选择将该文件进行压缩,然后在进行传输 ...

  8. Java Synchronized Method This Static Class Object 区别

    1. 必须基于对象 Synchronized Method 和 Synchronized(this) 块,除了范围小点 (方法和块),没差别都是阻塞整个对象 - 如果对象有多个 Synchronize ...

  9. 初入计算机专业，学习c语言的第一周作业问答

    2019年9月17日下午3点30,我来到了1117教室准备上我进入大学的第一堂计算机专业课,并需要完成以下作业. 2.1 你对软件工程专业或者计算机科学与技术专业了解是怎样? 我所了解的计算机就是一台 ...

  10. C++基础之迭代器

    迭代器的分类 插入迭代器(insert iterator):绑定一个容器上后可以向容器中插入元素: 流迭代器(stream iterator):绑定在输入输出流中,可以遍历关联的流: 反向迭代器(re ...