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 ...
随机推荐
- ssh config 配置
一个打开新连接免密码的小技巧 Host * ControlMaster auto ControlPath ~/.ssh/master-%r@%h:%p
- python调用oracle存储过程
oracle 存储过程 python调用oracle存储过程 -- 通过cx_Oracle连接 import cx_Oracle # 连接数据库 orcl_engine = 'scott/s123@x ...
- VSCode变换python的调试解释器
假如一个电脑上有多个Python的环境,想要设置不同的python解释器用于调试. VSCode 的设置,是通过.json的文本来配置的.打开文本的方式: 打开后的文件如下所示: 可以试试“new s ...
- Vue （表单、斗篷、条件、循环指令，分隔符成员、计算属性成员、属性的监听、vue组件、子组件、各个常见的钩子函数）
表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- 20190922 「HZOJ NOIP2019 Round #7」20190922模拟
综述 这次是USACO2019JAN Gold的题目. \(\mathrm{Cow Poetry}\) 题解 因为每句诗的长度一定是\(k\),所以自然而然想到背包. 设\(opt[i][j]\)代表 ...
- LG4035/BZOJ1013 「JSOI2008」球形空间产生器 高斯消元
问题描述 LG4035 BZOJ1013 题解 设答案为\((p_1,p_2,p_3,...,p_n)\) 因为是一个球体,令其半径为\(r\),则有 \[\sum_{i=1}^{n}{(a_i-p_ ...
- python3中pymysql模块的事务操作
try: cursor.execute(sql_1) cursor.execute(sql_2) cursor.execute(sql_3) except Exception a ...
- luoguP4213 【模板】杜教筛（Sum）杜教筛
链接 luogu 思路 为了做hdu来学杜教筛. 杜教筛模板题. 卡常数,我加了register居然跑到不到800ms. 太深了. 代码 // luogu-judger-enable-o2 #incl ...
- Zabbix的基本功能
zabbix组件: 两核心组件: zabbix-server(监控者) :收集agent发送的数据,写入数据库(mysql.oracal.)中,再通过web展示出来.默认端口为10051. zabbi ...
- wpf “{DependencyProperty.UnsetValue}”不是属性“Background”的有效值。异常
, 在wpf模板中, 有一个Background绑定的值不存在导致的异常, 我的是有这个没有导致的错误, 自己添加之后就没有了