零基础的人怎么用 HTML5 制作幻灯片

零基础的人怎么用 HTML5 制作幻灯片,第1张

html5可以使用代码实现的简单幻灯片,并且能用鼠标滚轮滚动进行换页。

具体代码如下:

<!doctype html>

<html>

<head>

<title></title>

<style>

#slides{

position:absolute

left:0px

top:0px

height:100%

width:100%

overflow:hidden

}

.slide{

position:absolute

height:600px

width:800px

opacity:0.7

background-color:rgba(0, 128, 196, 0.5) !important

background-color:#ccc

border-radius:10px

left:50%

top:50%

margin-top:-300px

box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5)

transition:all 0.25s ease-in-out 0s

}

.current{

opacity:1

margin-left:-400px

}

.future{

margin-left:450px

transform: skew(-3deg) scale(0.8)

-webkit-transform: skew(-3deg) scale(0.8)

}

.post{

margin-left:-1250px

transform: skew(3deg) scale(0.8)

-webkit-transform: skew(3deg) scale(0.8)

}

.far-future{

margin-left:1200px

transition:none

开发者必用:F12或者安装bug查件!

去懒人图库等一些站长用的工具里找到幻灯片的图片,

使用方法:

使用方法:

1、在head区域引入样式表文件lrtk.css,js/pe.kenburns/themes/default/skin.min.css

2、在head区域引入jquery-1.5.2.min.js和js/pe.kenburns/jquery.pixelentity.kenburnsslider.min.js

3、初始化

<script>

jQuery(function($){

$(".peKenBurns").peKenburnsSlider({externalFont:true})

})

</script>

4、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7248112.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存