最近编写了个js图片轮播器，但浏览器之间不兼容。我解决不了。哪位高手帮帮修改一下吧。
0
悬赏园豆：200
[已关闭问题]
关闭于 2011-03-30 16:09
最近编写了个js图片轮播器，但浏览器之间不兼容。我解决不了。哪位高手帮帮修改一下吧。
html:
查看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=utf-8" />
<title>focus_demo</title>
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<div class="focus" id="focus">
<ul class="imgList">
<li><a href="#"><img src="images/1.jpg" alt="1" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="2" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="3" /></a></li>
<li><a href="#"><img src="images/4.jpg" alt="4" /></a></li>
<li><a href="#"><img src="images/5.jpg" alt="5" /></a></li>
</ul>
<ol class="btnId" id="btnId"></ol>
</div>
<input name="" type="button" id="prev" value="prev" />
<input name="" type="button" id="next" value="next" /><br />
<textarea id="test" style="width:960px; height:1000px;"></textarea>
<script type="text/javascript" src="focus.js"></script>
<script type="text/javascript">
var df = new dreamFocus({
id: 'focus',
btnId:'btnId',
width: 600,
height: 350,
size: 5
});
document.getElementById('next').onmousedown = function(){
df.next();
}
document.getElementById('prev').onmousedown = function(){
df.prev();
}
</script>
</body>
</html>
css:
查看CSS
@charset "utf-8";
/* CSS Document */
/* 基础样式 植入网页是推荐删除 */
*{padding:0;margin:0;}
body{font-size:12px;}
ul,li{list-style:none;}
img{border:none;}
.focus{margin:0 auto;margin-top:100px;background:#eee;position:relative;}
.focus ul.imgList{position:absolute;left:0;top:0;}
.focus ul.imgList li{float:left;}
ol.btnId{position:absolute;bottom:3px;right:3px;height:24px;display:inline;}
ol.btnId li{color:#fff;float:left;height:24px;margin-left:2px;width:24px;text-align:center;line-height:24px; background:#000;cursor:pointer;}
ol.btnId li.current{ background:#558A08;}
查看javascript
function dreamFocus(options) {
this.id = this.$(options.id);
this.btnId = this.$(options.btnId);
this.width = options.width;
this.height = options.height;
this.size = options.size;
this.btnOpactiy = options.btnOpacity || 70;
this.speed = options.speed || 500;
this.btnClass = options.btnClass || "current";
this.curIndex = options.curIndex || 0;
this.imgUl = this.tag('ul', this.id)[0];
this.imgLi = this.tag('li', this.imgUl);
this.btnLi = this.tag('li', this.btnId);
this.init();
}
dreamFocus.prototype = {
init: function () {
//设置focus的样式
this.setStyle(this.id, {
width: this.width,
height: this.height,
overflow: 'hidden',
position: 'relative'
});
this.createBtn();
this.setOpacity(this.btnId, this.btnOpactiy);
this.setStyle(this.imgUl, {
width: this.width * this.size,
left: 0
});
this.h2 = this.id.appendChild(document.createElement('h2'));
this.setStyle(this.h2,{height:32,lineHeight:32,background:'#000',opacity:60,color:'#fff',padding:'0 0 0 12px'});
for (var i = 0; i < this.size; i++) {
this.setStyle(this.imgLi[i], {
width: this.width,
height: this.height,
overflow: 'hidden'
});
};
this.moveTo(this.curIndex);
this.mouseHover();
this.autoPlay();
},
$: function (elem) {
return document.getElementById(elem);
},
tag: function (name, elem) {
return (elem || document).getElementsByTagName(name);
},
mouseHover: function () {
var _this = this;
for (var i = 0; i < this.size; i++) {
this.btnLi[i].onmouseover = function () {
_this.curIndex = this.index;
_this.moveTo(this.index);
_this.stop();
}
this.btnLi[i].onmouseout = function(){
_this.autoPlay();
}
this.btnLi[i].index = i;
}
},
setStyle: function (elem, style) { //基础样式设置函数，还可以设置透明度
for (var i in style) {
if (i != 'opacity') {
if (Number(style[i])) elem.style[i] = style[i] + "px";
else elem.style[i] = style[i];
}
if (i == 'opacity') this.setOpacity(elem, style[i]);
}
},
setOpacity: function (elem, num) {
if (elem.filters) {
elem.style.filter = "alpha(opacity=" + num + ")";
} else {
elem.style.opacity = num / 100;
}
},
createBtn: function () {
var btnHTML = '';
for (var i = 0; i < this.size; i++) {
btnHTML += '<li>' + (i + 1) + '</li>';
}
this.btnId.innerHTML = btnHTML;
},
animate: function (o, start, alter, dur, fx) {
var _this = this;
var curTime = 0;
var t = setInterval(function () {
if (curTime >= dur) clearInterval(t);
for (var i in start) {
o.style[i] = fx(start[i], alter[i], curTime, dur) + "px";
}
curTime += 40;
}, 40);
return function () {
clearInterval(t);
};
},
moveTo:function(index){
var curLeft = parseInt(this.imgUl.style.left);
this.Interval && this.Interval();
this.Interval = this.animate(this.imgUl, {
left: curLeft
}, {
left: (-this.width * index) - curLeft
}, this.speed, this.easeOut);
this.h2.innerHTML = this.tag('img',this.imgLi[this.curIndex])[0].getAttribute('alt');
this.recoverBtnClass();
//this.$('test').innerHTML = this.btnId.innerHTML;
},
autoPlay:function(){
var _this=this;
this.stop();
this.interval=setInterval(function () {
_this.next();
},3000);
},
next:function(){
this.curIndex = (this.curIndex == this.size-1) ? 0 : this.curIndex+1;
this.moveTo(this.curIndex);
},
prev:function(){
this.curIndex = (this.curIndex == 0) ? this.size-1 : this.curIndex-1;
this.moveTo(this.curIndex);
},
stop:function () {
clearInterval(this.interval);
},
easeOut: function (start, alter, curTime, dur) {
var progress = curTime / dur * 2;
return (progress < 1 ? Math.pow(progress, 4) : -((progress -= 2) * Math.pow(progress, 3) - 2)) * alter / 2 + start;
},
recoverBtnClass: function () {
for (var i = 0; i < this.size ; i++)
{ this.btnLi[i].setAttribute('class','');}
this.btnLi[this.curIndex].setAttribute('class',this.btnClass);
}
}
所有回答(1)
0
Jquery 这方面的东西应该很多吧。自己先看看源码。应该就可以搞定了
