首页 新闻 搜索 专区 学院

最近编写了个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;}
js:

查看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);
}
}

孟回头的主页 孟回头 | 菜鸟二级 | 园豆:210
提问于:2011-03-29 11:44
< >
分享
所有回答(1)
0

Jquery 这方面的东西应该很多吧。自己先看看源码。应该就可以搞定了

五香瓜子 | 园豆:450 (菜鸟二级) | 2011-03-29 12:33
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册