图片轮换的一个例子,但是还不太好
<script language="javascript" type="text/javascript">
//定义数组存好图片
var imgs = ['Imgs/1.jpg', 'Imgs/2.jpg', 'Imgs/3.jpg', 'Imgs/4.jpg', 'Imgs/5.jpg'];
<!--var text = ['图片1说明文字', '图片2说明文字', '图片3说明文字', '图片4说明文字', '图片5说明文字'];-->
var Imgs= new Array();
var images="<%=ImagesStr %>";//后台得到一连串的图片路径,此外服务器控件和Html标签有不同,在图片的路径的设置上如
Imgs=images.split(","); //得到每张图的路径
var o = document.getElementById('banner_img');
var t = document.getElementById('text');
var idx = 0;
function ch() {
o.style.backgroundImage = 'url('+Imgs[idx]+')';
//设置html元素内的html文本
// alert(Imgs[idx]);
color(idx);
idx++;
if ( idx > Imgs.length - 1 ) {
idx = 0;
}
}
function setImg( i ) {
o.style.backgroundImage = 'url('+Imgs[i]+')';
idx = i;
color(i);
}
function color( i ) {
for ( var j = 0; j < Imgs.length; j++ ) {
var ele = document.getElementById('i-'+j);
if ( j == i )
ele.className = 'i-now';
else
ele.className = 'i-item';
}
}
setInterval('ch()', 2000);
</script>
<div class="banner">
<div id="banner_img">
<div class="fill">
</div>
</div>
<div class="clearfloat">
</div>
<div class="h-box">
<a class="i-item" onclick="setImg(4)" id="i-4">5</a> <a class="i-item" onclick="setImg(3)"
id="i-3">4</a> <a class="i-item" onclick="setImg(2)" id="i-2">3</a> <a class="i-item"
onclick="setImg(1)" id="i-1">2</a> <a class="i-item" onclick="setImg(0)" id="i-0">1</a>
<a id="text"> </a>
</div>
</div>