CSS3+JavaScript实现翻页幻灯片效果
先上效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#content{
width: 500px;
height: 300px;
margin: 40px auto;
position: relative;
transform-style: preserve-3d;
}
#content>div{
width: 100%;
height: 100%;
position: absolute;
transform-origin: center bottom;
}
#content img{
width: 100%;
height: 100%;
}
#next{
position: absolute;
top:190px;
left: calc(33% - 60px);
}
#prev{
position: absolute;
top: 190px;
left: calc(68% + 30px);
}
@keyframes next{ //创建一个动画这是一个翻到下面的效果
from{
-wbelit-transform: perspective(1000px) rotateX(0deg); /* 开始位置是 0°*/
opacity: 1; //初始透明为1
}
to{
-webkit-transform: perspective(1000px) rotateX(-180deg); /*结束位置是 180°*/
opacity: 0; //结束透明为0
}
}
@keyframes prev{ //创建一个由上边翻到上边的动画
0%{
-webkit-transform: perspective(1000px) rotateX(180deg); /* 初始开始位置 */
opacity:0; //初始为透明
}
57%
{
-webkit-transform: perspective(1000px) rotateX(-16deg); /* 动画进行到 56% 的时候他为 -16° */
opacity:1; //透明已经为1 了
}
66%
{
-webkit-transform: perspective(1000px) rotateX(14deg); /* 再回到 14° 的位置 */
}
74%
{
-webkit-transform: perspective(1000px) rotateX(-12deg); /* 再回到 -12°的位置 */
}
81%
{
-webkit-transform: perspective(1000px) rotateX(10deg); /* 再回到 10°的位置 */
}
87%
{
-webkit-transform: perspective(1000px) rotateX(-8deg); /* 再回到 -8°的位置 */
}
92%
{
-webkit-transform: perspective(1000px) rotateX(6deg); /* 再回到 6° 的位置 */
}
96%
{
-webkit-transform: perspective(1000px) rotateX(-4deg); /* 再回到 -4° 的位置 */
}
100%
{
-webkit-transform: perspective(1000px) rotateX(0deg); /* 最后回归 0° */
}<br>
}
.next{
animation: next 1s ease 1 normal 0s; /* 执行向下的动画 */
transform: rotateX(-180deg); /* 因为初始位置是0 但当你执行完动画还会回到原位 所以它转到哪里就把他设在哪里不要再让它回去了 */
opacity: 0;
}
.prev{
animation: prev 1.2s ease 1 normal 0s; /* 执行向上的动画 */
transform: rotateX(0deg); /* 同上 */
opacity: 1;
}
</style>
</head>
<body>
<button id="next">←</button><button id="prev">→</button>
<div id="content">
<div class="prev"><img src="images/012.jpeg"></div> <!-- 设置默认的第一页 -->
<div class="next"><img src="images/017.jpeg"></div>
<div class="next"><img src="images/020.jpeg"></div>
<div class="next"><img src="images/027.jpeg"></div>
<div class="next"><img src="images/0df3d7ca7bcb0a46ce09bc1e6e63f6246b60afe9.jpg"></div>
</div>
<script>
window.onload=function(){
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var content=document.getElementById("content");
var oDiv=content.getElementsByTagName("div");
var x=0;
next.onclick=function(){ //当向下翻页时
oDiv[x].setAttribute("class","next"); //第一个页 设置class名让他向下走去
x++
if(x>oDiv.length-1){
x=0
}
oDiv[x].setAttribute("class","prev"); //++过后让他的下一个页面起来
}
prev.onclick=function(){ //同上只是++变--
oDiv[x].setAttribute("class","next");
x--
if(x<0){
x=oDiv.length-1
}
oDiv[x].setAttribute("class","prev");
}
}
</script>
</body>
</html>
以上所述是小编给大家介绍的CSS3+JavaScript实现翻页幻灯片效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
移动端翻页插件dropload.js（支持Zepto和jQuery）
dropload.js提供了最基本的上拉翻页,下拉刷新功能.对于由服务端一次返回所有数据的情况基本通用. 但是,需求往往不是服务端一次性返回所有数据,往往还要支持服务端分页,搜索,排序,多条件筛选等功能.(比较类似美团美食的界面) 一.解决方案 改进1:由于有分页,搜索,排序,多条件筛选功能,可能都不需要上拉,进到页面就没有数据. 例如:搜索一个服务端不存在的名字. 所以,添加接口设置setHasData. MyDropLoad.prototype.setHasData = function(i
-
js+css实现上下翻页相册代码分享
这是一款基于js+css实现上下翻页相册特效代码,相册可以从上下两个方向进行切换,是一款非常实用的幻灯片特效源码. 先为大家展示效果图: 效果演示 源码下载 为大家分享的jQuery幻灯片带缩略图轮播代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js+css实现上下翻页相册</title>
-
JavaScript 拖拽翻页效果代码
拖拽翻页效果JavaScript特效-demo by http://www.jb51.net html,body{ width:100%; height:100%; border:0px; margin:0px; overflow:hidden; } #menu{ width:1000px; height:500px; overflow:hidden; background:lightblue; } .page{ position:absolute; width:300px; height:40
-
Javascript表格翻页效果的具体实现
表格翻页的实现方式有很多,下面以js为例为大家详细介绍下表格翻页效果的具体实现. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页---www.jb51.net</TITLE> <style> body, td{ font-size: 9pt; } a:link {
-
jsp 使用jstl实现翻页实例代码
使用jstl进行显示相对使用jsp来说代码更显得整齐,也使代码量显得较少 复制代码 代码如下: <%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib prefix="c" uri = "http://java.sun.com/jsp/jstl/core"
-
Js实现网页键盘控制翻页的方法
本文实例讲述了Js实现网页键盘控制翻页的方法.分享给大家供大家参考.具体实现方法如下: 键盘控制翻页效果我想我们不少见了,经常在很多网站特别是相册的效果都可以直接使用键盘进行上下页进行翻页了,原理很简单,只要利用js监测用户是否有按上下键即可实现. 举例如下: 复制代码 代码如下: <a id="last" href="<?=$lefturl?>">上一章</a> <a id="booklist" hre
-
Javascript表格翻页效果实现思路及代码
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页</TITLE> <style> body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover
-
js带前后翻页的图片切换效果代码分享
本文实例讲述了javascript带前后翻页的图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于javascript带前后翻页的图片切换效果代码,实现过程很简单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/css.css" rel="stylesheet" type=&qu
-
js实现翻页后保持checkbox选中状态的实现方法
项目中的分页使用真分页,每次点击上下页按钮后,再次调用后台方法查询,重新刷新此页面.所以checkbox为false. 比如酷狗音乐中,上下页选中的歌曲不会保留,只能在每页中选择添加后,再切换下页. 但是项目中有着需求,所以只能完成实现. 项目具体的需求如下:给角色授权时,选择模块以及模块下的操作,点击上下页后选中的checkbox不变. 界面如下: 实现的思路如下: 在界面中,使用纯js完成.把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到ac
-
CSS3+JavaScript实现翻页幻灯片效果
先上效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ width: 500px; height: 300px; margin: 40px auto; position
-
jquery+css3问卷答题卡翻页动画效果示例
CSS3+jQuery制作立体翻页时间展示动画特效.该翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用. 这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatib
-
jQuery实现点击图片翻页展示效果的方法
本文实例讲述了jQuery实现点击图片翻页展示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>基于jQuery实现的点击图片翻页展示效果</title> <meta http-equiv="content-type&q
-
JS模仿腾讯图片站的图片翻页按钮效果完整实例
本文实例讲述了JS模仿腾讯图片站的图片翻页按钮效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" conten
-
纯javascript移动优先的幻灯片效果
简要教程 wallop是一款移动优先的纯javascript幻灯片插件.这个幻灯片插件仅4k大小,它的原理仅是为HTML元素添加和移除适当的class来显示和隐藏它们,至于这些class样式你可以完全自定义.特点有: 移动优先 动画和过渡效果都使用CSS来生成 轻量级,仅4k大小 高度灵活性和可扩展性 可自定义事件和API 没有任何外部依赖 使用方法 使用该幻灯片插件首先需要引入wallop.css和Wallop.min.js文件. <link rel="stylesheet"
-
JavaScript实现翻页功能(附效果图)
效果图: 要点: displayPage('#pageDiv','goPage','query',10,1,100); #pageDiv是显示翻页的div名称. goPage是跳转到后面的文本输入框的id,如果有需要可以根据 * 这个参数直接赋值. query是查询的方法名称. 10是总页数 1是当前页数 100是总条数. <%@ page language="java" contentType="text/html;charset=UTF-8" pageEn
-
Android 仿日历翻页、仿htc时钟翻页、数字翻页切换效果
废话不多说,效果图: 自定义控件找自网络,使用相对简单,具体还没有来得及深入研究,只是先用笨方法大概实现了想要的效果,后续有空会仔细研究再更新文章, 本demo切换方法是用的笨方法,也就是由新数字和旧数字相比较来切换数字变换的,大致使用方法如下: //获取输入框中的数字 int newNumber = Integer.parseInt(etInput.getText().toString()); //获取个.十.百位数字 int nbai = newNumber / 100; int nshi
-
JavaScript实现标签页切换效果
本文实例为大家分享了JavaScript实现标签页切换效果的具体代码,供大家参考,具体内容如下 构建主体界面 HTML代码 <h1>实现标签页的切换效果</h1> <ul id="tab"> <li><a href="">影视</a></li> <li><a href="">娱乐</a></li> <li>