IT数码

搜狐圈子 IT数码 web开发浏览帖子

来自圈子：web开发 (41 人)

圈子描述：创造是一种乐趣

圈子标签：web 开发

圈主：空中的梦想家

副圈主：

JS 图片变换效果 0/?

标签:

日志原文：http://happy30001.blog.sohu.com/95191643.html

<!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");

    //初始化显示区域
    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>

我是美丽签名档

多分享，做达人>>

崇拜楼主 |

分享 | 引用 | 回复 | 发表时间:2008-07-21

藏在云端的猪

积分:6
体力:?
头衔:1级小宝宝
加为好友
向他打招呼

	启用高级编辑器
回复内容:

IT数码

来自圈子：web开发 (41 人)

JS 图片变换效果 0/?

看好该帖的朋友们：