网上提供的html幻灯片代码如何使用

网上提供的html幻灯片代码如何使用,第1张

开发者必用: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、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可

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

<body onLoad="setScrollPic()" leftmargin="0" topmargin="0">

<script language="JavaScript1.2">

<!--

//格式调用

transeffect = 0

theeffects = new Array(24)

theeffects[0] = "盒状收缩"

theeffects[1] = "盒状向外"

theeffects[2] = "圆形收缩"

theeffects[3] = "圆形向内"

theeffects[4] = "从下向上"

theeffects[5] = "从上向下"

theeffects[6] = "从左向右"

theeffects[7] = "从右向左"

theeffects[8] = "百页窗形向右"

theeffects[9] = "百页窗形向下"

theeffects[10] = "棋盘形交叉向右"

theeffects[11] = "棋盘形交叉向下"

theeffects[12] = "随意溶解形"

theeffects[13] = "左右向内"

theeffects[14] = "左右向外"

theeffects[15] = "上下向内"

theeffects[16] = "上下向外"

theeffects[17] = "条纹状向左下"

theeffects[18] = "条纹状向左上"

theeffects[19] = "条纹状向右下"

theeffects[20] = "条纹状向右上"

theeffects[21] = "解水平状"

theeffects[22] = "溶解上下状"

theeffects[23] = "随着溶解"

//格式完成

//图片参数

var myImages = new Array(6)//加图片要修改这儿

for(i=0i<myImages.lengthi++){

myImages[i] = new Image()

}

myImages[0].src = "images/ch02.jpg"

myImages[1].src = "images/ch03.jpg"

myImages[2].src = "images/ch04.jpg"

myImages[3].src = "images/ch05.jpg"

myImages[4].src = "images/ch06.jpg"

myImages[5].src = "images/ch07.jpg"

lastImageNum = 0

function setScrollPic(){

if(lastImageNum>=myImages.length) lastImageNum = 0

document.all.ioriPic.filters.item(0).Apply()

document.all.ioriPic.filters.item(0).Transition = transeffect

document.all.ioriPic.filters.item(0).Play(2.0)

document.all.ioriPic.src=myImages[lastImageNum].src

transeffect++

if (transeffect == 24)

transeffect = 0

lastImageNum++

window.setTimeout("setScrollPic()",4000)

}

//图片完成

-->

</script>

<img src="images/ch01.jpg" name="ioriPic" width="1024" height="768" style="FILTER: revealTrans(Duration=3.0,Transition=1)">


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存