如果循环播放图片？asp.net

setking 2008-09-01 12:15:15

我想做个页面，左边是个多选的列表框，里面是图片的文件名！

右面是一个asp:image控件

我想实现，多选左面的列表框！

右边的image控件按一定速度循环播放列表框中选中的图片！

如何实现???

谢谢大家！！！

...全文

289 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

a285921021 2008-09-01

打赏
举报

做给谁看啊，晕

jiang_jiajia10 2008-09-01

打赏
举报

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

jack20080808 2008-09-01

打赏
举报



<!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>