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 相关文章推荐
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
javascript history对象详解
Feb 09 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
javascript 对象定义方法 简单易学
2009/03/22 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
python使用range函数计算一组数和的方法
2015/05/07 Python
Python中模块string.py详解
2017/03/12 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Python中装饰器学习总结
2018/02/10 Python
python实现内存监控系统
2021/03/07 Python
Python for循环与range函数的使用详解
2019/03/23 Python
python多线程同步实例教程
2019/08/11 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
怎么写好自荐书
2014/03/02 职场文书
商业项目策划方案
2014/06/05 职场文书
单位介绍信格式
2015/01/31 职场文书
正规借条模板
2015/05/26 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书