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 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
详解离线安装npm包的几种方法
Nov 25 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
深入php数据采集的详解
2013/06/02 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
php压缩文件夹最新版
2018/07/18 PHP
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
详解webpack 入门与解析
2018/04/09 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python实现端口检测的方法
2018/07/24 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
波兰珠宝品牌:YES
2019/08/09 全球购物
店长助理岗位职责
2013/12/13 职场文书
高三学生评语大全
2014/04/25 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS