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 相关文章推荐
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
Preload基础使用方法详解
Feb 03 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图片库imagemagick安装方法
2014/09/23 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
vue的for循环使用方法
2019/02/12 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
js实现筛选功能
2020/11/24 Javascript
python遍历序列enumerate函数浅析
2017/10/17 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
Django的models中on_delete参数详解
2019/07/16 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
白岩松演讲
2014/05/21 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书