JS写幻灯片特效

JavaScript012

JS写幻灯片特效,第1张

新建一个文件夹dome,

在文件下新建一个文件夹img 放入5张名称为1,2,3,4,5 格式为“.jpg”的图片文件。

在新建一个dome.html 文件 内容如下：

<html>

<head>

<meta charset="UTF-8"/>

<title></title>

<style type="text/css">

*{margin: 0padding: 0}

#a1{

width: 600px

height: 500px

border: 10px silver solid

animation:backgroundImg 5s infinite

-webkit-animation:backgroundImg 5s  infinite

}

@keyframes backgroundImg{

0%{background-color: #0000FF}

25%{background-color: #0099FF}

50%{background-color: #00FFFF}

75%{background-color: #99FFFF}

100%{background-color: #FFFFFF}

}

@-webkit-keyframes backgroundImg{

0%{background-color: #0000FF}

25%{background-color: #0099FF}

50%{background-color: #00FFFF}

75%{background-color: #99FFFF}

100%{background-color: #FFFF00}

}

#backImg{

width: 500px

height: 490px

/*border: 5px red solid*/

margin-left:45px

z-index: 100

background-size:100% 100%

}

a:hover{

background-color:#0000FF

border: 5px springgreen solid

width: 20px

}

a{

display: block

z-index:

width: 30px

height: 30px

text-align: center

line-height: 30px

color: beige

font-weight: 300

border-radius:50%

font-size: 2em

background-color:#0099FF

position: absolute

top: 255px

box-shadow: none

}

#right{

left:580px

}

span{

display: block

width: 50px

height: 10px

background-color: #99FFFF

float: right

margin-left: 20px

position: relative

bottom: 50px

right: 100px

}

#show{

width: 200px

height: 100px

border: 1px red solid

position: absolute

bottom: 230px

right: 150px

background-size:100% 100%

}

</style>

</head>

<body>

<div id="a1">

<a id="left">&lt</a>

<a id="right">&gt</a>

<div id="backImg"></div>

<div id="foot"></div>

</div>

<script type="text/javascript">

var div=document.getElementById("a1")

var backImg=document.getElementById("backImg")

var a_left=document.getElementById("left")

var a_right=document.getElementById("right")

var i=0

function backImage(){

i++

backImg.style.backgroundImage="url(img/" +i+".jpg)"

setTimeout(backImage,7000)

if(i>=5){

i=0

}

}

backImage()

a_left.onclick=function(){

i--

if(i<=0||i>5){

i=5

}

backImg.style.backgroundImage="url(img/" +i+".jpg)"

}

a_right.onclick=function(){

i++

if(i<=0||i>5){

i=1

}

backImg.style.backgroundImage="url(img/" +i+".jpg)"

}

for (var j = 0j <3j++) {

var span=document.createElement("span")

span.id="span_"+j

div.appendChild(span)

span.onmouseover=function(){

show(event)

}

}

function show(e) {

backImg.style.opacity="0.5"

var span = e.target

var div = document.createElement("div")

div.id = "show"

span.parentNode.appendChild(div)

console.log(span.id)

if(span.id=="span_2"){

i-=1

console.log(i)

if(i<=0||i>5){

i=5

}

div.style.backgroundImage="url(img/" +i+".jpg)"

}else if(span.id=="span_1"){

div.style.backgroundImage="url(img/" +i+".jpg)"

}else if(span.id=="span_0"){

i+=1

if(i<=0||i>5){

i=1

}

div.style.backgroundImage="url(img/" +i+".jpg)"

}

span.onmouseout = function() {

backImg.style.opacity="initial"

this.parentNode.removeChild(div)

}

span.onclick=function(){

backImg.style.backgroundImage="url(img/" +i+".jpg)"

}

}

</script>

</body>

</html>

1.flavr—超级漂亮的jQuery扁平弹出对话框     

2.轻量级触摸响应滑块插件JQuery lightSlider      

3.带37种3D动画特效的跨浏览器CSS3动画框架       

4.jquery整屏滚动插件Scrollify        

5.jquery旋转木马插件SLICK         

6.jquery文字动画插件LetterFX          

7.jquery文本翻转插件Wodry.js       

8.jquery通知插件toastr       

9.jQuery滚动执行动画插件FadeThis      

10.jquery表单验证插件Bootstrap Validator       

11.jCountdown倒计时插件jQuery           

12.iCheck不一样的checkbok         

13.Owl Carousel强大的响应式jQuery焦点图轮播插件   

14.magic-带64种动画效果的CSS3动画库     

15.jQuery实时搜索插件-HideSeek       

16.bootstrap modal对话框             

17.一款模拟CSS3动画的js插件-move.js              

18.可替代CSS3 transition和transform的jQuery插件          

19.基于bootstrap的jQuery多功能模态对话框插件

20.带CSS3过渡效果的js模态窗口插件        

21.支持移动触摸设备的简洁js幻灯片插件

22.jQuery轻量级响应式扁平风格tabs选项卡插件

23.jQuery轻量级响应式Tooltip插件

24.jQuery简单且功能强大的图片剪裁插件

25.带CSS3动画过渡效果的jQuery模态窗口插件

26.中国省市区地址三级联动jQuery插件

27.移动端优先且支持jQuery和Zepto的模态对话框插件

28.jQuery简单实用的tooltip插件

29.带CSS3过渡动画效果的jQuery Tabs选项卡插件

30.x0popup-纯js弹出对话框插件

31.WOW.js-元素在页面滚动时展示CSS3动画JS插件

32.Windows8样式的消息提示框jQuery插件

33.jQuery星级评分插件

34.fsBanner-实用的网站响应式Banner手风琴插件

35.draggabilly-功能强大的拖动拖拽元素插件

36.验证插件vali.js

37.响应式jQuery图片放大镜插件magnificent.js

38.可快速生成各种阴影效果的jQuery插件

39.基于jquery的非常逼真的全屏下雪效果

40.纯文本Loading加载指示器特效

幻灯片的内容需要包含在 <div class="reveal"><div class="slides">的标签中。

一个section是一页幻灯片。

如果你将多个 <section>放到另一个<section>的内部，它们将会以垂直幻灯片的方式显示。第一个垂直幻灯片是其它的 “root（根）”

怎么理解呢？ 可以这样理解：横向的幻灯片代表一章，纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的，而纵向的幻灯片是上下切换的。

For example:

其他具体内容请查询下节 参考 引用。

1、 reveal.js-一个专门用来做 HTML 演示文稿的框架

2、 HTML5幻灯片库reveal.js使用

3、 使用reveal.js制作一个酷炫的网页ppt

4、 Reveal.js：把你的 Markdown 文稿变成 PPT