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 ...
随机推荐
- css,区别pc端ipad端的样式
摘自: http://blog.csdn.net/pm_mybook/article/details/54602107 /* 横屏 */ @media all and (orientation:lan ...
- 201871010105-曹玉中《面向对象程序设计（java）》第十五周学习总结
201871010105-曹玉中<面向对象程序设计(java)>第十五周学习总结 项目 内容 这个作业属于哪个过程 https://www.cnblogs.com/nwnu-daizh/ ...
- 微信小程序，知识点
对于小程序的授权,只要用户授权一次,该授权关系就会记录在后台,除非删除小程序,或者用户在设置中关闭该授权. 官方文档: https://developers.weixin.qq.com/minipro ...
- 浅谈SOA与RPC
一.SOA 英文名称:Service Oriented Ambiguity 中文名称:面向服务架构 SOA是一种思想,目的是提供一种设计项目的思路,让开发时更有效率. 例如原来的分布式项目中,在每个项 ...
- Machine Learning in Finance – Present and Future Applications
https://emerj.com/ai-sector-overviews/machine-learning-in-finance/ Machine learning has had fruitful ...
- bdd框架之lettuce
安装 执行 :lettuce (需要在特定的文件夹下) 结果指定到文件中
- 11/7 <Dynamic Programming>
62. Unique Paths 方法一: 二位数组 而这道题是每次可以向下走或者向右走,求到达最右下角的所有不同走法的个数.那么跟爬梯子问题一样,需要用动态规划 Dynamic Programmin ...
- ASP.NET开发实战——（二）为什么使用ASP.NET
本文主要内容是通过分析<博客系统>需求,确定使用Web应用的形式来开发,然后介绍了HTML.HTTP的概念,并使用IIS搭建了一个静态的HTML“页面”,从而引出“动态”的ASP.NET. ...
- 教你查阅Java API 英文文档（JDK 11）
JAVA Document:https://docs.oracle.com/en/java/javase/11/ 然后找到“Specifications”并点击 API Documentation 比 ...
- 本地搭建WordPress （XAMPP环境）
1,XAMPP是一个流行的PHP开发环境,官网下载: https://www.apachefriends.org/zh_cn/index.html 然后安装. 官方介绍:XAMPP是最流行的PHP开发 ...