图片自动播放

<script type='text/javascript'>var imgsrc = ['../Image/06143746765.jpg','../Image/06143754551.jpg','../Image/06143802781.jpg'].reverse();var imgurl = ['','',''].reverse();var intCount = 3;</script><div class='hotimg' id='swapTradeImageContainer'><img class='jsimg' id='imgarea' alt='' src='../Image/06143746765.jpg' /> <ul class='jsbtnlist' id='btnarea'><li>3</li><li>2</li><li class='jsbtnfocus'>1 </li></ul></div><script type='text/javascript' src='../js/swapImage.js'></script>选3张图片 选择合适的路径
swapImage.js 内容如下
var btncols = document.getElementById('btnarea').getElementsByTagName('li');
var oimg = document.getElementById('imgarea');
var picnow = intCount - 1;
for (i = 0; i < btncols.length; i++) {
    btncols[i].onmouseover = function(i) {
        return function() {
            if (i != picnow) {
                btncols[i].className = 'jsbtnfocus';
                btncols[picnow].className = '';
                picnow = i;
            }
            changepic(i);
    btncols[i].onclick = function(i) {
        return function() {
        }
    } (i)
            if (i != picnow) {
                btncols[i].className = 'jsbtnfocus';
                btncols[picnow].className = '';
                picnow = i;
            }
            changepic(i);
           // window.open(imgurl[i]);
            //window.location.href = imgurl[i];
        }
    } (i)
}
function changepic(num) {
    oimg.src = imgsrc[num];
    oimg.onclick = function() {
        //alert(imgurl[num]);
        window.open(imgurl[num]);
        //window.location.href = imgurl[num];
    }
}
function autopic() {
    picnow == 0 ? picnow = intCount - 1 : picnow--;
    btncols[picnow].className = 'jsbtnfocus';
    btncols[(picnow + 1) % intCount].className = '';
    changepic(picnow);
}
if(intCount!=1)
setInterval(autopic,3000);
var temp1 = document.getElementById('swapTradeImageContainer');
if (temp1) {
    if (temp1 && intCount != 1) {
        try{
        temp1.style.height = temp1.offsetHeight - 22;}catch(err){;}
    } 
}

解决方案 »

  1.   

    那些效果都是js+css实现的乐。有很多下载的。
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
        
    <script language="javascript" type="text/javascript">
        var images = ["http://tbn0.google.cn/images?q=tbn:n16eQmtceN4TnM:","http://tbn0.google.cn/images?q=tbn:oIMKhu6mBCxBjM:","http://tbn0.google.cn/images?q=tbn:prqkt8BaB2zEOM:"];
        var k = 1;
        function GiveTheNextImage(obj) {
            obj.src = images[k];
            k < images.length-1 ? k++ : k = 0;
        }
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
    <div style="margin-left:auto;margin-right:auto;text-align:center"><img onclick="GiveTheNextImage(this);" src="http://tbn0.google.cn/images?q=tbn:n16eQmtceN4TnM:" /></div>
        </form>
    </body>
    </html>
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>无标题页</title>
        
    <script language="javascript" type="text/javascript">
        var images = ["http://tbn0.google.cn/images?q=tbn:n16eQmtceN4TnM:","http://tbn0.google.cn/images?q=tbn:oIMKhu6mBCxBjM:","http://tbn0.google.cn/images?q=tbn:prqkt8BaB2zEOM:"];
        var k = 1;
        function GiveTheNextImage(obj) {
            obj.src = images[k];
            k < images.length-1 ? k++ : k = 0;
        }
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
    <div style="margin-left:auto;margin-right:auto;text-align:center"><img onclick="GiveTheNextImage(this);" src="http://tbn0.google.cn/images?q=tbn:n16eQmtceN4TnM:" /></div>
        </form>
    </body>
    </html>
      

  4.   

    bcastr.xml结合flash切换
    或用js参考
    参考