css3+javascript实现翻页幻灯片

css3+javascript实现翻页幻灯片


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<!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>

时间: 2024-10-15 10:54:23

css3+javascript实现翻页幻灯片的相关文章

JAVASCRIPT实现翻页保存已勾选的项目

<input type="checkbox" name="a" value="1" /><br/> <input type="checkbox" name="a" value="2" /><br/> <input type="checkbox" name="a" value="3&qu

手动点击循环翻页幻灯片总结

上面是最终完成的代码.虽然没什么动画效果,因为新手,但是还是很开心.说说开始到完成的几个主要阶段: 第一阶段:左右按钮都可以点击,但是没有停止也没有循环,所以当显示的部分都显示过后,出现的一直是空白.原因是没有控制_index的值. 第二阶段:可以循环了,但是因为获取到的li标签的个数除以8并不是每次都能刚好除尽,会有小数,本来使用parseInt()取整,这样当除完的结果是小数的时候,就可以正常切换了: 但是,当结果本来就是整数的时候,还是会有一个点击(主要是最后一页)是空白.原因是没有做判断

15个最佳jQuery的翻页书效果的例子

在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlock: jQuery内容翻转插件 BookBlock是可以将任何内容,如图像或文本创建小册子的组件,允许一个“翻页”的导航. 在线演示 2. imBookFlip : jQuery Page Turning Plugin without Flash imBookFlip可以将iframe加载书本成本

css3 --- 翻页动画 --- javascript --- 3d --- 准备

用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transition属性做的渐变颜色动画,下面是三张截图: 怎么样?好看吧,下面是它的代码: -webkit-transition: background-color 2s;-webkit-是用chrome或safari打开的一个前缀,transition时表示渐变的属性,它的值是 渐变属性 和 渐变时间,上面注释的部分

javascript翻页小控件paginator

$(container).paginator({  totalrecords : totalRecords,  recordsperpage : recordsPerpage,  pagebtncount : pageBtnCount,  initval : currentPage,  next : '次へ',  prev : '前へ',  first : '',  last : '',  theme : '',  controlsalways : false,  onchange : func

颗粒翻页(css3效果展示)

用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张图片(创建span的时候利用DOM操作,利用两个循环分别创建行和列,然后在循环中创建元素和设置元素css属性):然后在点击的时候添加事件,使用transform设置翻转效果,这里,我们可以设置逐个翻转和斜线翻转(斜线翻转利用的是span的行和列相加值相等原理):这里需要注意的是设置图片播放顺序,sp

css3实现web app翻页过度效果

最近在开发web app页面,要实现滑动翻页,一开始实现的效果是无任何过渡效果的,可是这样子的话页面会闪跳一下,用户体验非常不好.于是我们主管叫我用jquery mobile,可是用了这个库之后,问题来了,跳转到的目标页面,无法加载目标页面引入的外部css文件,最后用css3完美地解决了这个问题: .pt-page-moveToLeft { -webkit-animation: moveToLeft .6s ease both; -moz-animation: moveToLeft .6s ea

一款基于css3的3D图片翻页切换特效

今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="imgdex"> <figure> <img src="arabic-eyes.jpg" alt="Photograph of a woman's face under a Bedouin headress"><

css3挂历翻页效果

翻页效果显示当前时间 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/test.css" /> <script type="t