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 ...
随机推荐
- ConcurrentSkipListMap的常用方法
package com.geo.map; import java.util.Iterator;import java.util.Map.Entry;import java.util.Set;impo ...
- python 登录并获取session，使用session新增ecshop的草稿
,"consignee":"冬天","email":"12345@qq.com","address" ...
- 剖析linux内核中的宏---------container_of
#define container_of(ptr, type, member) ({ \ const typeof(((type *)0)->member) * __mptr = (ptr); ...
- V4l2初识（七）-----------浅析app获取虚拟摄像头数据的过程
继续分析数据的获取过程: 1.请求分配的缓冲区: ioctl(4,VIDIOC_REQBUFS) vidioc_reqbufs 2.查询和映射缓冲区 ioctl(4,VIDIOC_QUERYBUF ...
- 201871010131-张兴盼《面向对象程序设计（java）》第十四周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业要求在哪里 https://www.cnblogs.com/lily-2018/p/1 ...
- CSRF/XSRF 跨站请求伪造
CSRF/XSRF 跨站请求伪造 CSRF(Cross Site Request Forgery, 跨站域请求伪造)也称 XSRF, 是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安 ...
- httpHandlers path="*.sky"
<httpHandlers> <add verb="*" path="*.sky" type="WebAppHttpHandlerT ...
- djang小项目过程中的小问题 01（django中的configrarion配置、django自带命名规范）
不知道为什么,明明照着做,但是我就会遇到一些错误问题,但是我觉着自己生下来就是解决问题的. ##1. 第一个是在django运行时,没有配置configration, 这个时候我添加一个django ...
- spring cloud各个微服务之间如何相互调用（Feign、Feign带token访问服务接口）
1.首先先看什么是Feign. 这里引用“大漠知秋”的博文https://blog.csdn.net/wo18237095579/article/details/83343915 2.若其他服务的接口 ...
- 实验1 C语言开发环境和数据类型、运算符、表达式
#include <stdio.h> int main () { int x; printf("输入一个整数:\n"); scanf("%d",&a ...