这里贴代码好麻烦,发不出,自己看看.
应该是这种代码，不知道你那能用不？<!DOCTYPE html>
<html xmlns="http://*www.w3.*org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>图片切换效果</title>
<script src="RevealTrans.js"></script>
</head>
<body>
<style type="text/css">
.container{
width:380px
height:300px
border:1px solid #eee
position:relative
}
#idPicText{
background:#eee
line-height:25px
text-align:center
font-weight:bold
width:382px
white-space:nowrap
overflow:hidden
font-size:12px
}
#idPicText a{
text-decoration:none
color:#333
display:block
}
#idPicList img{
cursor:pointer
width:60px
height:45px
filter:alpha(opacity=50)
-moz-opacity: .5
opacity: .10
border:0
margin:10px
}
#idPicList img.on{
filter:alpha(opacity=100)
-moz-opacity: 1
opacity: 1
}
#idNum{ position:absoluteright:5pxbottom:5px}
#idNum li{
float: left
list-style:none
color: #fff
text-align: center
line-height: 16px
width: 16px
height: 16px
font-family: Arial
font-size: 12px
cursor: pointer
margin: 1px
border: 1px solid #707070
background-color: #060a0b
}
#idNum li.on{
line-height: 18px
width: 18px
height: 18px
font-size: 14px
border: 0
background-color: #ce0609
font-weight: bold
}
</style>
<div id="idPicShow" class="container">
<ul id="idNum">
</ul>
</div>
<div id="idPicText"></div>
<div id="idPicList"></div>
<script>
//////////////////////
var rvt = new RevealTrans("idPicShow")
//添加变换对象
rvt.Add('http.......143727/r_rt_1.jpg', '图片变换效果', 'http://www............................html')
rvt.Add('http....../143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www........................2.html')
rvt.Add('http....../143727/r_rt_3.jpg', '图片切换展示效果', 'http://www........................0.html')
rvt.Add(............./143727/r_rt_1.jpg', '图片变换效果', 'http://www............................2.html')
rvt.Add(............./143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.c.......................2.html')
var oList = $("idPicList"), oText = $("idPicText"), arrImg = []
var oNum = $("idNum"), arrNum = []
//设置图片列表
Each(rvt.List, function(list, i){
//图片式
var img = document.createElement("img")
img.src = list["img"]img.alt = list["text"]
arrImg[i] = img
oList.appendChild(img)
//按钮式
var li = document.createElement("li")
li.innerHTML = i + 1
arrNum[i] = li
oNum.appendChild(li)
//事件设置
img.onmouseover = li.onmouseover = function(){ rvt.Auto = falservt.Index = irvt.Start()}
img.onmouseout = li.onmouseout = function(){ rvt.Auto = truervt.Start()}
})
//设置图片列表样式 文本显示区域
rvt.onShow = function(){
var i = this.Index, list = this.List[i]
//图片式
Each(arrImg, function(o){ o.className = ""})arrImg[i].className = "on"
//按钮式
Each(arrNum, function(o){ o.className = ""})arrNum[i].className = "on"
//文本区域
oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text
}
//文本显示区域
oText.onmouseover = function(){ rvt.Auto = falservt.Stop()}
oText.onmouseout = function(){ rvt.Auto = truervt.Start()}
rvt.Start()
</script>
<br />
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0342339836871729"
/* 728x90, 创建于 10-1-26 */
google_ad_slot = "8648094726"
google_ad_width = 728
google_ad_height = 90
//-->
</script>
<script type="text/javascript"
src="http........100_2_b2b5de1c242708a.js">
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）