...的网站首页图片轮播代码。图片在左侧,文字在右侧显示的。就像动易图...

发布网友发布时间：2024-09-27 05:34

共2个回答

热心网友时间：2024-09-28 15:17

应该是这种代码，不知道你那能用不？
<!DOCTYPE html>
<html xmlns="http://*www.w3.*org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=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:absolute; right:5px; bottom: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 = false; rvt.Index = i; rvt.Start(); };
img.onmouseout = li.onmouseout = function(){ rvt.Auto = true; rvt.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 = false; rvt.Stop(); };
oText.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };

rvt.Start();

</script>
<br />
<script type="text/javascript">
</script>
<script type="text/javascript"
src="http........100_2_b2b5de1c242708a.js">
</script>
</body>
</html>

热心网友时间：2024-09-28 15:22

试试这个图片轮播

有12345数字一起切换

有小图大图一起切换

里面有教程和源码