修改后的轮显图片显示代码(上下左右居中,不变形,取最高值,另边按此比例显示)--ff/ie8
2010-02-01 15:18
405 查看
<!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个显示图片
二个大图左右按钮
二个小图左右按钮
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css3 来实现图片在指定容器内等比例缩放，并控制中上下左右居中
- 如何保证在IE和火狐等主流浏览器让图片在块级元素中左右，上下居中显示
- 解决移动端等比例图片上下左右居中的方法
- 宽高比例不固定的用户头像纵向居中的方法（不使用表格、代码精简、图片不变形）
- jQuery-图片预加载+等比例缩放+图片在容器中上下左右居中！
- Delphi DBGridEh 嵌入图片，显示文字，且上下左右居中
- 兼容ie8及其他低版本图片上下左右居中
- css3 来实现图片在指定容器内等比例缩放，并控制中上下左右居中
- CSS3实现图片在DIV中上下左右居中（2）
- 常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全
- 常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全
- 常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全
- 常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全
- html图片上下左右居中
- 常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)
- CSS布局：图片在DIV中上下左右居中(水平和垂直都居中)
- 带客户端脚本的图片控件，可利用后台代码修改图片显示（C#代码）
- 修改开机图片和居中显示
- CSS 图片居中显示不变形，显示图片中间部分
- 一个上下左右都居中的非table的纯CSS实现代码