首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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图片轮播

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

JS+css3实现幻灯片轮播图

- Author -

littleboyck

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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
pyqt5(3) linux(15) Qlabel(1) random(1) 切片(1) DFA(1) pygame(3) pycharm(6) MapReduce(1) Slice(1)
You might like
一个查看session内容的函数
2006/10/09 PHP
用ＰＨＰ和ＡＣＣＥＳＳ写聊天室(二)
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 职场文书