开发者必用: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)">
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)