css3+JS实现幻灯片轮播图
<!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);
});
css3+JS实现幻灯片轮播图的更多相关文章
- CSS3最简洁的轮播图
<!DOCTYPE html> <html> <head> <title>CSS3最简洁的轮播图</title> <style> ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- css3实现3D切割轮播图案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
- photoSlider-原生js移动开发轮播图、相册滑动插件
详细内容请点击 在线预览 立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
随机推荐
- VUE注册局部组件
// 局部组件命名规范 /* 1文件夹名大驼峰 MyLocalBtn.vue 2 使用的时候 将驼峰转化为横杠 <my-local-btn></my-local-btn> */ ...
- 解决txt乱码：将windows新建txt转换成utf-8格式
场景:产品将版本发布说明发给配置管理员(我自己),我使用jenkins建的任务自动传这个版本发布说明文件(release_note.txt)到ftp以后,打开文件后发现乱码. 调试: 但是将文件另存为 ...
- flask POOL,websocket握手
一.POOL Pool就是为了多线程访问数据库,减少数据库压力 回顾pymysql import pymysql #建立连接 mysql_conn = pymysql.connect(host=&qu ...
- flask 基础2
一.装饰器的坑 在使用装饰器函数时候,当一个装饰器装饰多个函数的时候,会由于内存地址相同时发生报错,因为装饰的都是一个函数 所以就需要引入 import functools 重新定义每一个函数的名称 ...
- 神兽、佛祖保佑，代码全程无bug
''' ━━━━━━神兽出没━━━━━━ ┏┓ ┏┓ ┏┛┻━━━━━┛┻┓ ┃ ┃ ┃ ━ ┃ ┃ ┳┛ ┗┳ ┃ ┃ ┃ ┃ ┻ ┃ ┃ ┃ ┗━┓ ┏━┛ Code is far away fr ...
- CPU-bound(计算密集型) 和I/O bound(I/O密集型)/数据密集型
https://blog.csdn.net/q_l_s/article/details/51538039 I/O密集型 (CPU-bound)I/O bound 指的是系统的CPU效能相对硬盘/内存的 ...
- Spark & Scala：
https://blog.csdn.net/do_yourself_go_on/article/details/76033252 Spark源码之reduceByKey与GroupByKey ...
- JavaScript中的this—你不知道的JavaScript上卷读书笔记（三）
this是什么? this 是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调用时的各种条件.this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式.当一个函数被调用时,会 ...
- Tableau 基础
1.Tableau产品介绍 tableau desktop:桌面端分析工具,分个人版和专业版,可连接几乎所有数据源,速度快 tableau server:一款商业智能应用程序,用于发布和管理table ...
- MyEclipse10破解 运行run.bat闪退 亲自试验
找到MyEclipse安装的自带的jdk(方法是打开MyEclipse,依次window->Preferences->Java->Installed JRES找到默认路径,我的是:自 ...