首页
所有分类
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 相关文章推荐
jquery移动listbox的值原理及代码
May 03 Javascript
JS控制输入框内字符串长度
May 21 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
微信小程序轮播图swiper代码详解
Dec 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
感谢信(72) 请假条(31) 评语(336) 保证书(97) 接收函(23) 活动总结(790) 制度(225) 计划书(118) 寄语(276) 倡议书(159)
You might like
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
qq登录，新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
用Python编程实现语音控制电脑
2014/04/01 Python
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
详解Python数据可视化编程 - 词云生成并保存（jieba+WordCloud）
2019/03/26 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
Python多线程正确用法实例解析
2020/05/30 Python
Python如何使用input函数获取输入
2020/08/06 Python
python 密码学示例——理解哈希（Hash）算法
2020/09/21 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
汽车运用工程毕业生自荐信
2013/10/29 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
职工食堂管理制度
2015/08/06 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python