1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             *{
  8.                 margin: 0;
  9.                 padding: 0;
  10.                 -webkit-touch-callout: none;
  11.                 -webkit-user-select: none;
  12.                 -khtml-user-select: none;
  13.                 -moz-user-select: none;
  14.                 -ms-user-select: none;
  15.                 user-select: none;
  16.             }
  17.             .clearfix:after{
  18.                 clear: both;
  19.             }
  20.             .clearfix:after,.clearfix:before{
  21.                 content: "";
  22.                 display: table;
  23.             }
  24.             .slide_view{
  25.                 width: 600px;
  26.                 height: 200px;
  27.                 overflow: hidden;
  28.                 margin: 40px auto;
  29.                 position: relative;
  30.             }
  31.             ul{
  32.                 width: 600px;
  33.                 height: 100%;
  34.             }
  35.             li{
  36.                 position: absolute;
  37.                 width: 600px;
  38.                 height:100%;
  39.                 opacity: 0;
  40.             }
  41.             li.active{
  42.                 opacity: 1;
  43.             }
  44.  
  45.             .hor-slide-ani .next-out
  46.             {
  47.                 animation: hor-slide-next-out .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
  48.             }
  49.             .hor-slide-ani .next-in{
  50.                 animation: hor-slide-next-in .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
  51.             }
  52.  
  53.             .hor-slide-ani .prev-out
  54.             {
  55.                 animation: hor-slide-prev-out .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
  56.             }
  57.             .hor-slide-ani .prev-in{
  58.                 animation: hor-slide-prev-in .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
  59.             }
  60.             @keyframes hor-slide-next-out{
  61.                 from{
  62.                     opacity: 1;
  63.                 }
  64.                 to{
  65.                     opacity: 1;
  66.                     transform: translateX(100%);
  67.                 }
  68.             }
  69.  
  70.             @keyframes hor-slide-next-in{
  71.                 from{
  72.                     opacity: 1;
  73.                     transform: translateX(-100%);
  74.                 }
  75.                 to{
  76.                     opacity: 1;
  77.                     transform: translateX(0);
  78.                 }
  79.             }
  80.             @keyframes hor-slide-prev-out{
  81.                 from{
  82.                     opacity: 1;
  83.                 }
  84.                 to{
  85.                     opacity: 1;
  86.                     transform: translateX(-100%);
  87.                 }
  88.             }
  89.  
  90.             @keyframes hor-slide-prev-in{
  91.                 from{
  92.                     opacity: 1;
  93.                     transform: translateX(100%);
  94.                 }
  95.                 to{
  96.                     opacity: 1;
  97.                     transform: translateX(0);
  98.                 }
  99.             }
  100.             .prev{
  101.                 position: absolute;
  102.                 left: 10px;
  103.                 top: 40%;
  104.                 display: block;
  105.                 padding: 10px;
  106.                 text-align: center;
  107.                 width: 20px;
  108.                 height: 20px;
  109.                 border-radius: 100%;
  110.                 background: rgba(0,0,0,.4);
  111.                 color: white;
  112.                 font-size: 22px;
  113.                 line-height: 22px;
  114.             }
  115.             .next{
  116.                 position: absolute;
  117.                 right: 10px;
  118.                 top: 40%;
  119.                 display: block;
  120.                 padding: 10px;
  121.                 text-align: center;
  122.                 width: 20px;
  123.                 height: 20px;
  124.                 border-radius: 100%;
  125.                 background: rgba(0,0,0,.4);
  126.                 color: white;
  127.                 font-size: 22px;
  128.                 line-height: 22px;
  129.             }
  130.         </style>
  131.     </head>
  132.     <body>
  133.         <div class="slide_view">
  134.             <ul class="slides clearfix hor-slide-ani" style="position: relative;">
  135.                 <li class="active" style="background: salmon;">1</li>
  136.                 <li style="background: darkcyan;">2</li>
  137.                 <li style="background: seagreen;">3</li>
  138.                 <li style="background: sandybrown;">4</li>
  139.             </ul>
  140.             <div class="control">
  141.                 <span class="prev">&larr;</span>
  142.                 <span class="next">&rarr;</span>
  143.             </div>
  144.         </div>
  145. </body>
  1. <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
  2.         <script>
  3.             var aniName = (function(el) {
  4.               var animations = {
  5.                 animation: 'animationend',
  6.                 OAnimation: 'oAnimationEnd',
  7.                 MozAnimation: 'mozAnimationEnd',
  8.                 WebkitAnimation: 'webkitAnimationEnd',
  9.               };
  10.  
  11.               for (var t in animations) {
  12.                 if (el.style[t] !== undefined) {
  13.                   return animations[t];
  14.                 }
  15.               }
  16.               return false;
  17.             })(document.createElement('div'));
  18.  
  19.             var aniEndCallback=function($ele,endCall){
  20.                 if(aniName && typeof endCall == 'function'){
  21.                     var called=false;
  22.                     //在每次transitionEnd的事件后执行该函数
  23.                     var callback = function(){
  24.                         if (!called){
  25.                             called=true;
  26.                             endCall($ele);
  27.                         }
  28.                     };
  29.                     $ele[0].addEventListener(aniName,function(){
  30.                         callback();
  31.                         //通过setTimeout来补救windowphone中不触发事件的问题
  32.                         setTimeout(callback,200);
  33.                     },false);
  34.                 }else{
  35.                     endCall($ele);
  36.                 }
  37.             };
  38.  
  39.             $(function(){
  40.                 var aniStatus = false;
  41.                 $('.next').click(function(){
  42.                     if(aniStatus){return};
  43.                     aniStatus = true;
  44.                     var $slides = $('.slides').children()
  45.                     , slideCount = $slides.length
  46.                     , $active = $('.active')
  47.                     , curActiveIndex = $('.active').index()
  48.                     , nextActiveIndex = curActiveIndex -1;
  49.                     if(curActiveIndex == 0){
  50.                         nextActiveIndex = slideCount-1;
  51.                     }
  52.                     $slides.eq(curActiveIndex).addClass('next-out');
  53.                     $slides.eq(nextActiveIndex).addClass('next-in');
  54.  
  55.                     aniEndCallback($active,function($ele){
  56.                         aniStatus = false;
  57.                         $active.removeClass('next-out active');
  58.                         $slides.eq(nextActiveIndex).removeClass('next-in').addClass('active');
  59.                     });
  60.                 });
  61.  
  62.                 $('.prev').click(function(){
  63.                     if(aniStatus){return;}//不在动画状态，才能执行
  64.                     aniStatus= true;
  65.                     var $slides = $('.slides').children()
  66.                         , slideCount = $slides.length
  67.                         , $active = $('.active')
  68.                         , curActiveIndex = $('.active').index()
  69.                         , nextActiveIndex = curActiveIndex + 1;
  70.                         if(curActiveIndex == slideCount-1){
  71.                             nextActiveIndex = 0;
  72.                         }
  73.                         $slides.eq(curActiveIndex).addClass('prev-out');
  74.                         $slides.eq(nextActiveIndex).addClass('prev-in');
  75.  
  76.                     aniEndCallback($active,function($ele){
  77.                         aniStatus = false;
  78.                         $active.removeClass('prev-out active');
  79.                         $slides.eq(nextActiveIndex).removeClass('prev-in').addClass('active');
  80.                     });
  81.                 });
  82.  
  83.                 setInterval(function(){
  84.                     $('.prev').trigger('click')
  85.                 },4000);
  86.             });

css3+JS实现幻灯片轮播图的更多相关文章

  1. CSS3最简洁的轮播图

    <!DOCTYPE html> <html> <head> <title>CSS3最简洁的轮播图</title> <style> ...

  2. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  3. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  4. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  5. css3实现3D切割轮播图案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

  7. 原生 js 左右切换轮播图

    使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...

  8. photoSlider-原生js移动开发轮播图、相册滑动插件

    详细内容请点击 在线预览   立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...

  9. photoSlider-html5原生js移动开发轮播图-相册滑动插件

    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...

随机推荐

  1. python字典基本操作

    字典是python中五中基本数据类型之一,虽然它的赋值稍微麻烦点,但用起来真的是很方便.它用键值对来存放数据,所谓键值对,就是一个键,对应一个值,如果后面对前面的键再次赋值,第一次的值就被覆盖掉.像是 ...

  2. day5_configparser模块

    第一种情况:# 配置文件baidu.ini和当前文件在同一级目录: import configparser conf_read = configparser.ConfigParser() conf_r ...

  3. 读架构漫谈&我眼中的架构师

    本周是开学的第二周,读了由资深架构师王概凯 Kevin 执笔的系列专栏架构漫谈.初识这门课,懂得也不是很多,读了架构漫谈,有了一些理解. 首先作者讲述了缘起,由早期人独立自主生活到后来的集群,作者由这 ...

  4. 003VlookUp的使用

    在Excel中,Vlookup这个函数还是挺有用的 我最近在一个场景中使用到VlookUp函数,使用场景是 我们将学生名单导入到学业上报系统的时候,发现Excel中有 79条数据但是导入成功的提示是说 ...

  5. <Dynamic Programming> 120 279

    120. Triangle 从倒数第二行找,然后逐个遍历这个DP数组,对于每个数字,和它之后的元素比较选择较小的再加上面一行相邻位置的元素做为新的元素,然后一层一层的向上扫描 class Soluti ...

  6. 【转】Java代码编译过程简述

    转载:https://blog.csdn.net/fuzhongmin05/article/details/54880257. 代码编译是由Javac编译器来完成,流程如下图1所示: 图1 Javac ...

  7. IAR环境搭建

    工具下载:https://pan.baidu.com/s/1nwv0RVz 第一步:右键点击EW8051-EV-8103-Web.exe,使用管理员权限运行. 第二步:我们运行之后只要一直Next下去 ...

  8. Bootstrap-table实现动态合并相同行

    Bootstrap-table  表格合并相同名字的列 @编写function() /** * 合并行 * @param data 原始数据(在服务端完成排序) * @param fieldName ...

  9. [LeetCode] 327. Count of Range Sum 区间和计数

    Given an integer array nums, return the number of range sums that lie in [lower, upper] inclusive.Ra ...

  10. KMP 串的模式匹配 (25分)

    给定两个由英文字母组成的字符串 String 和 Pattern,要求找到 Pattern 在 String 中第一次出现的位置,并将此位置后的 String 的子串输出.如果找不到,则输出“Not ...