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 ...
随机推荐
- shell的使用技巧
推荐使用的远程连接软件以及vi编辑器的基本使用 简介:远程连接软件 与 vi命令的基本使用 (1)软件: CRT 已经下载好的压缩包 直接双击 点击新建会话 点击下一步 输入主机名 下一步 ...
- 微信小程序警告：Now you can provide attr "wx:key" for a "wx:for" to improve performance.
那是因为在<block wx:for-items="{{imgUrls}}">中不存在wx:key="imgUrls"所以才导致报了个警告. 写成& ...
- es启动失败
Aug 09 21:43:23 10921114-elklogserver elasticsearch[30152]: 2018-08-09 21:43:23,068 main ERROR Null ...
- 【贪心】umi的函数
原题传送门 思路 这道题乍一看很难,然而实际在草纸上一模拟,结果就出来了. 分析:这道题实际上要么无解,要么有无数个解,因而题目只要求输出了一个解(明白这点题目就做出来一半了). 题中,规定所求z满足 ...
- 应用层协议：HTTPS
1. HTTPS定义 Hyper Text Transfer Protocol over Secure Socket Layer,安全的超文本传输协议,网景公式设计了SSL(Secure Socket ...
- C# HTTP系列5 HttpWebResponse.StatusCode属性
系列目录 [已更新最新开发文章,点击查看详细] HttpWebResponse.StatusCode 属性获取响应的状态.对应 HttpStatusCode 枚举值之一. HttpStatus ...
- RDS for MySQL权限问题（错误代码：1227，1725）
https://help.aliyun.com/knowledge_detail/41701.html 错误信息 [Err] 1227 - Access denied; you need (at ...
- 【08月01日】A股滚动市净率PB历史新低排名
2010年01月01日 到 2019年08月01日 之间,滚动市净率历史新低排名. 上市三年以上的公司,2019年08月01日市净率在30以下的公司. 来源:A股滚动市净率(PB)历史新低排名. 1 ...
- Spring Boot Cache使用与整合
Spring 提供了对缓存功能的抽象:即允许绑定不同的缓存解决方案(如Caffeine.Ehcache等),但本身不直接提供缓存功能的实现.它支持注解方式使用缓存,非常方便. SpringBoot在a ...
- Qt Quick 常用元素：RadioButton(单选框)，CheckBox(复选框) 与 GroupBox(分组框)
先介绍一下 ExclusiveGroup. ExclusiveGroup (互斥分组)本身是不可见元素,用于将若干个可选择元素组合在一起, 供用户选择其中的一个选项.你可以在 ExclusiveGro ...