图片轮换的一个例子,但是还不太好

<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">&nbsp;</a>
                </div>
            </div>

原文地址:https://www.cnblogs.com/woshare/p/2763404.html