我想做个页面,左边是个多选的列表框,里面是图片的文件名!右面是一个asp:image控件我想实现,多选左面的列表框!右边的image控件按一定速度循环播放列表框中选中的图片!如何实现???谢谢大家!!!

解决方案 »

  1.   

    js可以实现去网上找找代码,一般会用到Timeout
      

  2.   

    js可以实现??我是用VB.NET的,能写吗?
      

  3.   

    左边绑定数据库的图片路径啊   点击时把图片的ID传给右边 让他在img里面显示啊  
    就是这么简单啊 很好做的啊
      

  4.   


    Dotnet.Silverlight......[qq群34129441]
      

  5.   


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>图片切换效果</title>
    <style type="text/css">
    #idPicShow img{
        width:265px;
        height:200px;
        border:1px solid #eee;
    }
    #idPicText {
        background:#eee;
        line-height:25px;
        text-align:center;
        font-weight:bold;
        width:267px;
        white-space:nowrap;
        overflow:hidden;
        font-size:12px;
    }
    #idPicText a {
        text-decoration:none;
        color:#333;
    }
    #idPicList img {
        cursor:pointer;
        width:65px;
        height:50px;
        filter:alpha(opacity=50);
        -moz-opacity: .5;
        opacity: .5;
        border:0;
        margin:10px;
    }
    #idPicList img.on {
        filter:alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
    }
    </style>
    <script type="text/javascript">
    var isIE = (document.all) ? true : false;var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }Object.extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }//ie only
    var TransView = Class.create();
    TransView.prototype = {
      initialize: function(arrList, idShow, idList, idText, options) {
        if(!arrList || arrList.length == 0) return;
        
        var oThis = this, oShow = $(idShow), oList = $(idList), oText = $(idText), img = document.createElement("img"), a = document.createElement("a");
        alert(img);    
        //初始化显示区域
        img.src = "javascript:;"; a.target = "_blank"; if(isIE){ img.style.filter = "revealTrans(duration=1)"; };
        a.appendChild(img); oShow.appendChild(a);
        this._oList = oList;
        this._oText = oText;
        this._list = arrList;
        this._img = img;
        
        
        this._a = a;
        this._timer = null;
        this._index = -1;
        
        this.SetOptions(options);
        
        this.Time = Math.abs(this.options.Time);
        this.Auto = !!this.options.Auto;
        this.ClassOn = this.options.ClassOn;
        this.ClassOff = this.options.ClassOff;
        
        this.Set();
      },
      //设置默认属性
      SetOptions: function(options) {
        this.options = {//默认值
          ClassOn:        "",//显示时样式
          ClassOff:        "",//不显示时样式
          Auto:            true,//是否自动切换
          Time:            3000//切换时间
        };
        Object.extend(this.options, options || {});
      },
      //设置
      Set: function() {
        this.Each(function(list, i){
            var oThis = this, img = document.createElement("img");
            
            img.src = list["img"];
            img.alt = list["text"];
            img.onmouseover = function(){ oThis.Show(i); };
            img.onmouseout = function(){ if(oThis.Auto){ oThis._timer = setTimeout(function(){ oThis.Run(); }, oThis.Time); } };
            
            this._list[i]["obj"] = img;
            
            //这里封装的不好
            this._oList.appendChild(img);
        });
        
        this.Run();
      },
      //显示
      Show: function(i) {
        this.Stop();
        
        if(i < 0 || i >= this._list.length) i = 0;    if(isIE){
        
            this._img.filters.revealTrans.Transition = Math.floor(Math.random() * 23);
            this._img.filters.revealTrans.apply();
            this._img.filters.revealTrans.play();
            
        }
        
        this._img.src = this._list[i]["img"];
        this._img.alt = this._list[i]["text"];
        
        if(!this._list[i]["url"]){
            this._oText.innerHTML = this._list[i]["text"];
            this._a.removeAttribute("href");
        } else {
            this._oText.innerHTML= "<a href='" + this._list[i]["url"] + "' target='_blank'>" + this._list[i]["text"] + "</a>";
            this._a.href = this._list[i]["url"];
        }
        
        if(this._index >= 0) this._list[this._index]["obj"].className = this.ClassOff;
        this._list[i]["obj"].className = this.ClassOn;
        this._index = i;
      },
      //开始
      Run: function() {
        this.Show(this._index + 1);
        if(this.Auto){ var oThis = this; this._timer = setTimeout(function(){ oThis.Run(); }, oThis.Time); }
      },
      //停止
      Stop: function() {
        clearTimeout(this._timer);
      },
      //
      Each:function(fun) {
        for (var i = 0, len = this._list.length; i < len; i++)
            fun.call(this, this._list[i], i);
      },
      //添加
      Add:function(img, text, url) {
        this.Stop();
        var len = this._list.length;
        this._list[len] = {'img': img, 'text': text, 'url': url }
        this._oList.innerHTML = "";
        
        this.Set();
      },
      //
      Delete:function(index) {
        index--;
        if(index < 0 || index > this._list.length) return;
        
        this.Stop();
        var _arr = [];
        var m =0;
        
        this.Each(function(list, i){ if(i != index)    _arr[m++] = list; });
        this._list = _arr;
        this._oList.innerHTML = "";
        
        this.Set();
      }
    };
    </script>
    </head>
    <body>
    <div id="idPicShow"></div>
    <div id="idPicText"></div>
    <div id="idPicList"> </div>
    <div style="clear:both;"> 图片url:<br />
      <input id="textImg" type="text" value="http://car.fs12345.com/UploadFile/2008520163714.jpg" />
      <br />
      说明:<br />
      <input id="textText" type="text" value="韩国车模是玉女还是欲女" />
      <br />
      链接地址:<br />
      <input id="textUrl" type="text" value="http://car.fs12345.com/Htmls/auto/mm/20080520161608122.htm" />
      <br /><br />
      <input name="" type="button" value=" 添 加 " onclick="Add();" />
      <br /><br />
      <input name="" type="button" value=" 删 除 " onclick="Delete();" /> 第 <input id="textIndex" type="text" size="3" value="1" /> 个
    </div>
    <script>
    var tv = new TransView([
            {'img':'http://car.fs12345.com/UploadFile/2008520163803.jpg', 'text':'雷诺梅甘娜推特别版', 'url':'http://car.fs12345.com/Htmls/auto/newcar/20080520161004009.htm'},
            {'img':'http://car.fs12345.com/UploadFile/200851084140.jpg', 'text':'全新MG名爵TF', 'url':'http://car.fs12345.com/Htmls/auto/newcar/20080510083439924.htm'},
            {'img':'http://car.fs12345.com/UploadFile/200841690403.jpg', 'text':'保时捷RS Spyder', 'url':'http://car.fs12345.com/Htmls/auto/mzsj/20080416085953966.htm'}
        ], "idPicShow", "idPicList", "idPicText", { ClassOn: "on" }
    );function Add(){
        tv.Add($("textImg").value, $("textText").value, $("textUrl").value);
    }function Delete(i){
        var i = $("textIndex").value;
        if(!isNaN(i)) tv.Delete(parseInt(i));
    }
    </script>
    </body>
    </html>