0
点赞
收藏
分享

微信扫一扫

修改后的轮显图片显示代码(上下左右居中,不变形,取最高值,另边按此比例显示)--ff/ie8


<!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=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="css.css" mce_href="css.css" />
</head>
<body>

<BR><Br><BR><Br><BR><Br><BR><Br><BR><Br><BR><Br><BR><Br><BR><Br><BR><Br><BR><Br><BR><Br><BR><Br><BR><Br><BR><Br><BR><Br><BR><Br><BR><Br>dddddddddddddddddddddddddddddddddddd
<!--动态显示开始//-->
<div id="areaA" class="box">
  <div id="focus">
    <!--focus star-->
    <ul id="slideshow">
      <li>
        
        <span>img/1.jpg</span>
        <!--要链接就加a,要不,会尝试使用span的地址,再不,就使用img的src
        //-->
        <a href="http://www.google.com" mce_href="http://www.google.com" target=_blank></a>
        <p>
        <img src="img/1.jpg" mce_src="img/1.jpg" alt="Coral Reef" /></p></li>
      <li>
        
        <span>img/2.jpg</span>
        
        <a href="http://www.google.com" mce_href="http://www.google.com" target=_blank></a>
        <p>
        <img src="img/2.jpg" mce_src="img/2.jpg" alt="Coral Reef" /></p></li>
      <li>
        
        <span>img/3.jpg</span>
        <p>
        <img src="img/3.jpg" mce_src="img/3.jpg" alt="Coral Reef" /></p></li>
      <li>
        
        <span>img/4.jpg</span>
        
        <a href="http://www.google.com" mce_href="http://www.google.com" target=_blank></a>
        <p>
        <img src="img/4.jpg" mce_src="img/4.jpg" alt="Coral Reef" /></p></li>
      <li>
        
        <span>img/5.jpg</span>
        
        <a href="http://www.google.com" mce_href="http://www.google.com" target=_blank></a>
        <p>
        <img src="img/5.jpg" mce_src="img/5.jpg" alt="Coral Reef" /></p></li>
      <li>
        
        <span>img/6.jpg</span>
        
        <a href="http://www.google.com" mce_href="http://www.google.com" target=_blank></a>
        <p>
        <img src="img/6.jpg" mce_src="img/6.jpg" alt="Coral Reef" /></p></li>
      <li>
        
        <span>img/7.jpg</span>
        
        <a href="http://www.google.com" mce_href="http://www.google.com" target=_blank></a>
        <p>
        <img src="img/7.jpg" mce_src="img/7.jpg" alt="Coral Reef" /></p></li>
    </ul>
    <div id="wrapper">
      <div id="fullsize">
        <div id="imgprev" class="imgnav" title="上一张图"></div>
        <div id="imglink" target="_blank"></div>
        <div id="imgnext" class="imgnav" title="下一张图"></div>
        <div id="image"></div>
        <div id="information">
          
          <p></p>
        </div>
      </div>
      <div id="thumbnails">
        <div id="slideleft" title="向左滚动"></div>
        <div id="slidearea">
          <div id="slider"></div>
        </div>
        <div id="slideright" title="向右滚动"></div>
      </div>
    </div>
    <!--img end-->
<mce:script type="text/javascript" src="compressed.js" mce_src="compressed.js"></mce:script>

</div>
</div>

<!--动态显示结束//-->
</body>
</html>

*.html

var TINY = {};
function getTagID(i) {
    return document.getElementById(i)
}
function getTagName(e, p) {
    p = p || document;
    return p.getElementsByTagName(e)
}
TINY.slideshow = function(n) {
    this.infoSpeed = this.imgSpeed = this.speed = 10;
    this.thumbOpacity = this.navHover = 70;
    this.navOpacity = 25;
    this.scrollSpeed = 5;
    this.letterbox = '#fff';
    this.n = n;
    this.c = 0;
    this.a = [];
};
TINY.slideshow.prototype = {
    init: function(s, z, b, f, q) {
        s = getTagID(s);
        var m = getTagName('li', s),
        i = 0,
        w = 0;
        this.big_w = 335;
        this.big_h = 300;
        this.l = m.length;
        this.q = getTagID(q);
        this.f = getTagID(z);
        
        this.r = getTagID(this.info);
        this.o = parseInt(TINY.style.val(z, 'width'));
        this.p = getTagID(this.thumbs);
		if (this.left && this.right) {
            var u = getTagID(this.left),
            r = getTagID(this.right);
            u.onmouseover = new Function('TINY.scroll.init("' + this.thumbs + '",-1,' + this.scrollSpeed + ')');
            u.onmouseout = r.onmouseout = new Function('TINY.scroll.cl("' + this.thumbs + '")');
            r.onmouseover = new Function('TINY.scroll.init("' + this.thumbs + '",1,' + this.scrollSpeed + ')');
            
        }
        for (i; i < this.l; i++) {
            this.a[i] = {};
            var h = m[i],
            a = this.a[i];
            a.t = "";//getTagName('h3', h)[0].innerHTML;
            a.l = getTagName('a', h)[0] ? getTagName('a', h)[0].href: 
                 getTagName('span', h)[0].innerHTML != "" ? getTagName('span', h)[0].innerHTML:getTagName('img', h)[0].src;
            a.p = getTagName('span', h)[0].innerHTML;
            if (this.thumbs) {
            var g = getTagName('img', h)[0];
				if(this.numClass){
					var pbox = document.createElement("p");
					pbox.innerHTML = (i+1);
					var imgbox = "<span>" + pbox.innerHTML + "</span>";
				}
				else{
					var pbox = getTagName('p', h)[0];
					//var g = getTagName('img', h)[0];
					var imgbox = "<span>" + g.parentNode.innerHTML + "</span>";
							
				}
				
				this.p.appendChild(pbox);
                w += parseInt(pbox.offsetWidth);
                if (i != this.l - 1) {
                    pbox.style.marginRight = this.spacing + 'px';
                    w += this.spacing
                }
         
         
				if (this.left && this.right) this.p.style.width = w + 'px';
				if(i != 0 && this.numClass){
					pbox.onclick = new Function(this.n + '.pr(' + i + ',1)');
				}
				else if(i != 0){
					g.style.opacity = this.thumbOpacity / 100;
					g.style.filter = 'alpha(opacity=' + this.thumbOpacity + ')';
					g.onmouseover = new Function('TINY.alpha.set(this,100,5)');
					g.onmouseout = new Function('TINY.alpha.set(this,' + this.thumbOpacity + ',5)');
					g.onclick = new Function(this.n + '.pr(' + i + ',1)');
				}
				else if(i == 0 && this.numClass){
					pbox.onclick = new Function(this.n + '.pr(' + i + ',1)');
					pbox.className=this.numClass;
				}
				else if(i == 0){
					g.style.borderColor = this.active ? this.active : '';
					g.style.opacity = this.thumbOpacity / 70;
					g.style.filter = 'alpha(opacity=100)';
					g.onmouseover = new Function('TINY.alpha.set(this,100,5)');
					g.onmouseout = new Function('TINY.alpha.set(this,' + this.thumbOpacity + ',5)');
					g.onclick = new Function(this.n + '.pr(' + i + ',1)');
					}
            }
        }
        if (b && f) {
            b = getTagID(b);
            f = getTagID(f);
            b.style.opacity = f.style.opacity = this.navOpacity / 100;
            b.style.filter = f.style.filter = 'alpha(opacity=' + this.navOpacity + ')';
            b.onmouseover = f.onmouseover = new Function('TINY.alpha.set(this,' + this.navHover + ',5)');
            b.onmouseout = f.onmouseout = new Function('TINY.alpha.set(this,' + this.navOpacity + ',5)');
            b.onclick = new Function(this.n + '.mv(-1,1)');
            f.onclick = new Function(this.n + '.mv(1,1)')
        }
        
        this.auto ? this.is(0, 0) : this.is(0, 1);
    },
    mv: function(d, c) {
        var t = this.c + d;
        this.c = t = t < 0 ? this.l - 1 : t > this.l - 1 ? 0 : t;
        this.pr(t, c)
    },
    pr: function(t, c) {
		var aa = this.numClass ? getTagName('p', this.p):getTagName('img', this.p);
		
        clearTimeout(this.lt);
        if (c) {
            clearTimeout(this.at);
			aa[t].onmouseover = new Function('TINY.alpha.set(this,100,5)');
			aa[t].onmouseout = new Function('TINY.alpha.set(this,100,5)');
			aa[t].style.borderColor = this.active ? this.active : '';
			this.at = setTimeout(new Function(this.n + '.mv(1,0)'), this.speed * 1000)
        }
        this.c = t;
        this.is(t, c);
		if(this.numClass){
			aa[t].className=this.numClass;
		}
		else{
			aa[t].style.opacity = this.thumbOpacity / 70;
			aa[t].style.filter = 'alpha(opacity=100)';
			aa[t].style.borderColor = this.active ? this.active : '';
		}
    },
    is: function(s, c) {
         if (this.info && !this.sctollTex) {
           TINY.height.set(this.r, 1, this.infoSpeed / 2, -1)
        }
        var i = new Image();
        i.style.opacity = 0;
        i.style.filter = 'alpha(opacity=0)';
        this.i = i;
        i.onload = new Function(this.n + '.le(' + s + ',' + c + ')');
        i.src = this.a[s].p;
        if (this.thumbs) {
            var a = this.numClass ? getTagName('p', this.p) : getTagName('img', this.p),
            l = a.length,
            x = 0;
            for (x; x < l; x++) {
				if(x != s && this.numClass){
					a[x].className=this.numCurClass;
					a[x].style.filter='';
				}
				else if(x!=s){
					a[x].style.borderColor = '';
					a[x].style.opacity = this.thumbOpacity / 100;
					a[x].style.filter = 'alpha(opacity=' + this.thumbOpacity + ')';
                	a[x].onmouseover = new Function('TINY.alpha.set(this,100,5)');
                	a[x].onmouseout = new Function('TINY.alpha.set(this,' + this.thumbOpacity + ',5)');
				}
            }
        }
    },
    le: function(s, c) {        
        var m = getTagName('div', this.f);
        if (m.length > 0) {
            this.f.removeChild(m[0])
        }
        
        //控制高宽,让最大一边达到最大值,另一边按此比例显示
       var w_p= this.big_w / this.i.width;
       var h_p = this.big_h / this.i.height;       
         
				var div_b = document.createElement("DIV");
				div_b.className = "img_div";
				div_b.align="center";
				
        if (w_p < h_p)
        {
           this.i.height = parseInt(this.i.height * w_p );
           this.i.width = this.big_w;  
           var em_xp = (this.big_h - this.i.height) / 2; 
           div_b.innerHTML = "<div style='height:" + parseInt(em_xp) + "px;'></div>";        
        }else
         {
           this.i.style.width = parseInt(this.i.width * h_p );
           this.i.height = this.big_h;
         }
				div_b.appendChild(this.i);
				
        this.f.appendChild(div_b);
      // txt(this.f.outerHTML)
        var w = this.o - parseInt(this.i.offsetWidth);
        if (w > 0) {
            var l = Math.floor(w / 2);
            this.i.style.borderLeft = l + 'px solid ' + this.letterbox;
            this.i.style.borderRight = (w - l) + 'px solid ' + this.letterbox
        }
        TINY.alpha.set(this.i, 100, this.imgSpeed);
        var n = new Function(this.n + '.nf(' + s + ')');
		this.lt = this.sctollTex ? setTimeout(n,0) : setTimeout(n, this.imgSpeed * 100);
        if (!c) {
            this.at = setTimeout(new Function(this.n + '.mv(1,0)'), this.speed * 1000)
        }
        if (this.a[s].l != '') {
            this.q.onclick = new Function('window.open("' + this.a[s].l + '")');
            this.q.onmouseover = new Function('this.className="' + this.link + '"');
            this.q.onmouseout = new Function('this.className=""');
            this.q.style.cursor = 'pointer'
        } else {
            this.q.onclick = this.q.onmouseover = null;
            this.q.style.cursor = 'default'
        }
    },
    nf: function(s) {
        if (this.info) {
            s = this.a[s];
            //getTagName('h3', this.r)[0].innerHTML = s.t;
			if(this.sctollTex){
				this.r.style.height = '25px';
			}
			else{
				this.r.style.height = 'auto';
				var h = parseInt(this.r.offsetHeight);	
				this.r.style.height = 0;
				TINY.height.set(this.r, h, this.infoSpeed, 0);
			}
        }
    }
};
TINY.scroll = function() {
    return {
        init: function(e, d, s) {
            e = typeof e == 'object' ? e: getTagID(e);
            var p = e.style.left || TINY.style.val(e, 'left');
            e.style.left = p;
            var l = d == 1 ? parseInt(e.offsetWidth) - parseInt(e.parentNode.offsetWidth) : 0;
            e.si = setInterval(function() {
                TINY.scroll.mv(e, l, d, s)
            },
            20)
        },
        mv: function(e, l, d, s) {
            var c = parseInt(e.style.left);
            if (c == l) {
                TINY.scroll.cl(e)
            } else {
                var i = Math.abs(l + c);
                i = i < s ? i: s;
                var n = c - i * d;
                e.style.left = n + 'px'
            }
        },
        cl: function(e) {
            e = typeof e == 'object' ? e: getTagID(e);
            clearInterval(e.si)
        }
    }
} ();
TINY.height = function() {
    return {
        set: function(e, h, s, d) {
            e = typeof e == 'object' ? e: getTagID(e);
            var oh = e.offsetHeight,
            ho = e.style.height || TINY.style.val(e, 'height');
            ho = oh - parseInt(ho);
            var hd = oh - ho > h ? -1 : 1;
            clearInterval(e.si);
            e.si = setInterval(function() {
                TINY.height.tw(e, h, ho, hd, s)
            },
            20)
        },
        tw: function(e, h, ho, hd, s) {
            var oh = e.offsetHeight - ho;
            if (oh == h) {
                clearInterval(e.si)
            } else {
                if (oh != h) {
					var h = Math.ceil(Math.abs(h - oh) / s) * hd;
                    e.style.height = ((oh + h) < 0 ? 0 : (oh + h)) + 'px'
                }
            }
        }
    }
} ();
TINY.alpha = function() {
    return {
        set: function(e, a, s) {
            e = typeof e == 'object' ? e: getTagID(e);
            var o = e.style.opacity || TINY.style.val(e, 'opacity'),
            d = a > o * 100 ? 1 : -1;
            e.style.opacity = o;
            clearInterval(e.ai);
            e.ai = setInterval(function() {
                TINY.alpha.tw(e, a, d, s)
            },
            20)
        },
        tw: function(e, a, d, s) {
            var o = Math.round(e.style.opacity * 100);
            if (o == a) {
                clearInterval(e.ai)
            } else {
                var n = o + Math.ceil(Math.abs(a - o) / s) * d;
                e.style.opacity = n / 100;
                e.style.filter = 'alpha(opacity=' + n + ')'
            }
        }
    }
} ();
TINY.style = function() {
    return {
        val: function(e, p) {
            e = typeof e == 'object' ? e: getTagID(e);
            return e.currentStyle ? e.currentStyle[p] : document.defaultView.getComputedStyle(e, null).getPropertyValue(p)
        }
    }
} ();

function txt(html)
{
  if (getTagID("test"))
  {
     getTagID("test").innerText = html;
  }else
   {
     alert(html);
   }
}

//调用 

var slideshow=new TINY.slideshow("slideshow");
slideshow.auto=true;
slideshow.speed=4;
slideshow.big_w = 335;//最大的宽度
slideshow.big_h = 300;//最大的高度
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="red";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");

compressed.js

*{ padding:0; margin:0; font-style: normal; list-style: none; }
/* focus img */
#slideshow{display:none;}
#wrapper {width:339px; margin:0px auto;float:left;}
#fullsize {position:relative;width:335px;height:300px;border:1px #e34d8d solid;overflow:hidden;}
#information {position:absolute; bottom:0; width:337px; height:0; background:url("img/bg_trans.png") !important;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="img/bg_trans.png");_background:none; color:#fff; overflow:hidden; z-index:200; }
#information p{display:none;}
#information h3{padding:4px 8px 3px; font-size:14px;}
#image{width:335px;height:300px;}
.img_div{position:absolute; z-index:25;width:335px;height:300px; background:white; text-align:center; }
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150; }
#imgprev {left:0; background:url(img/left.gif) left center no-repeat transparent ; cursor:w-resize}
#imgnext {right:0; background:url(img/right.gif) right center no-repeat transparent ;  cursor:e-resize}
#imglink {position:absolute; height:306px; width:100%; z-index:100; background:url(img/link.gif) center center no-repeat transparent ;}
#slideleft {float:left; width:21px; height:73px; background:url(img/left_foucs.gif) center center no-repeat white}
#slideright {float:right; width:21px; height:73px; background:url(img/right_foucs.gif) center center no-repeat white}
#thumbnails{float:left;width:339px;background:white}
#slidearea{float:left;position:relative;width:297px;height:73px;overflow:hidden;}
#slider{position:absolute;left:0;width:280px;height:70px}
#slider p{background:white;float:left;width:auto;height:70px}
#slider img {cursor:pointer;width:auto;height:70px;border:1px solid #a8a8aa}

7个显示图片

 

二个大图左右按钮

二个小图左右按钮

 

举报
0 条评论