JS+css3实现幻灯片轮播图


Posted in Javascript onAugust 14, 2020

本文实例为大家分享了JS+css3实现幻灯片轮播图的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   *{
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   }
   .clearfix:after{
    clear: both;
   }
   .clearfix:after,.clearfix:before{
    content: "";
    display: table;
   }
   .slide_view{
    width: 600px;
    height: 200px;
    overflow: hidden;
    margin: 40px auto;
    position: relative;
   }
   ul{
    width: 600px;
    height: 100%;
   }
   li{
    position: absolute;
    width: 600px;
    height:100%;
    opacity: 0;
   }
   li.active{
    opacity: 1;
   }
   
   .hor-slide-ani .next-out
   {
    animation: hor-slide-next-out .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
   }
   .hor-slide-ani .next-in{
    animation: hor-slide-next-in .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
   }
   
   .hor-slide-ani .prev-out
   {
    animation: hor-slide-prev-out .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
   }
   .hor-slide-ani .prev-in{
    animation: hor-slide-prev-in .8s forwards cubic-bezier(0.7, 0, 0.3, 1);
   }
   @keyframes hor-slide-next-out{
    from{
     opacity: 1;
    }
    to{
     opacity: 1;
     transform: translateX(100%);
    }
   }
   
   @keyframes hor-slide-next-in{
    from{
     opacity: 1;
     transform: translateX(-100%);
    }
    to{
     opacity: 1;
     transform: translateX(0);
    }
   }
   @keyframes hor-slide-prev-out{
    from{
     opacity: 1;
    }
    to{
     opacity: 1;
     transform: translateX(-100%);
    }
   }
   
   @keyframes hor-slide-prev-in{
    from{
     opacity: 1;
     transform: translateX(100%);
    }
    to{
     opacity: 1;
     transform: translateX(0);
    }
   }
   .prev{
    position: absolute;
    left: 10px;
    top: 40%;
    display: block;
    padding: 10px;
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: rgba(0,0,0,.4);
    color: white;
    font-size: 22px;
    line-height: 22px;
   }
   .next{
    position: absolute;
    right: 10px;
    top: 40%;
    display: block;
    padding: 10px;
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: rgba(0,0,0,.4);
    color: white;
    font-size: 22px;
    line-height: 22px;
   }
  </style>
 </head>
 <body>
  <div class="slide_view">
   <ul class="slides clearfix hor-slide-ani" style="position: relative;">
    <li class="active" style="background: salmon;">1</li>
    <li style="background: darkcyan;">2</li>
    <li style="background: seagreen;">3</li>
    <li style="background: sandybrown;">4</li>
   </ul>
   <div class="control">
    <span class="prev">←</span>
    <span class="next">→</span>
   </div>
  </div>
</body>
<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
  <script>
   var aniName = (function(el) {
    var animations = {
    animation: 'animationend',
    OAnimation: 'oAnimationEnd',
    MozAnimation: 'mozAnimationEnd',
    WebkitAnimation: 'webkitAnimationEnd',
    };
  
    for (var t in animations) {
    if (el.style[t] !== undefined) {
     return animations[t];
    }
    }
    return false;
   })(document.createElement('div'));
   
   var aniEndCallback=function($ele,endCall){
    if(aniName && typeof endCall == 'function'){
     var called=false;
     //在每次transitionEnd的事件后执行该函数
     var callback = function(){ 
      if (!called){
       called=true;
       endCall($ele);
      } 
     };
     $ele[0].addEventListener(aniName,function(){
      callback();
      //通过setTimeout来补救windowphone中不触发事件的问题
      setTimeout(callback,200);
     },false);
    }else{
     endCall($ele);
    }   
   };
   
   
   
   $(function(){
    var aniStatus = false;
    $('.next').click(function(){
     if(aniStatus){return};
     aniStatus = true;
     var $slides = $('.slides').children()
     , slideCount = $slides.length
     , $active = $('.active')
     , curActiveIndex = $('.active').index()
     , nextActiveIndex = curActiveIndex -1;
     if(curActiveIndex == 0){
      nextActiveIndex = slideCount-1;
     }
     $slides.eq(curActiveIndex).addClass('next-out');
     $slides.eq(nextActiveIndex).addClass('next-in');
     
     aniEndCallback($active,function($ele){
      aniStatus = false;
      $active.removeClass('next-out active');
      $slides.eq(nextActiveIndex).removeClass('next-in').addClass('active');
     });
    });
    
    $('.prev').click(function(){
     if(aniStatus){return;}//不在动画状态,才能执行
     aniStatus= true;
     var $slides = $('.slides').children()
      , slideCount = $slides.length
      , $active = $('.active')
      , curActiveIndex = $('.active').index()
      , nextActiveIndex = curActiveIndex + 1;
      if(curActiveIndex == slideCount-1){
       nextActiveIndex = 0;
      }
      $slides.eq(curActiveIndex).addClass('prev-out');
      $slides.eq(nextActiveIndex).addClass('prev-in');
      
     aniEndCallback($active,function($ele){
      aniStatus = false;
      $active.removeClass('prev-out active');
      $slides.eq(nextActiveIndex).removeClass('prev-in').addClass('active');
     });
    });
    
    setInterval(function(){
     $('.prev').trigger('click')
    },4000);
   });

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 #Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 #Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 #Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 #Javascript
jQuery中event.target和this的区别详解
Aug 13 #jQuery
在Vue 中获取下拉框的文本及选项值操作
Aug 13 #Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 #Javascript
You might like
一个查看session内容的函数
2006/10/09 PHP
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
php入门小知识
2008/03/24 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
类似框架的js代码
2006/11/09 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
Vue项目中配置pug解析支持
2019/05/10 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
python求pi的方法
2014/10/08 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
pandas数据处理进阶详解
2019/10/11 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
优秀大学生职业生涯规划书
2014/02/27 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
防卫过当辩护词
2015/05/21 职场文书