兼容IE、火狐的图片轮换代码
3个回答
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js-exerctice</title>
<style>
body{font-size:12px;}
ul,li,div,span{padding:0;margin:0;}
#wrapper{border:1px solid #c06;width:750px;margin:50px auto;position:relative;zoom:1;overflow:hidden;}
.meaquee-wra{width:720px;height:137px;margin:0 auto;overflow:hidden;}
#meaquee{background:#fff;position:absolute;left:0;top:0;position:relative}
#copyCon{float:left;}
#wrapper li{text-align:center;float:left;list-style:none;_display:inline;margin-left:10px;}
#wrapper li img{width:100px;height:120px;display:block;border:none;}
#wrapper span{position:absolute;top:65px;text-indent:-9999px;display:block;border:8px solid #fff;cursor:pointer;width:0;height:0;overflow:hidden;}
#wrapper span.pre{left:5px;border-left:none;border-right-color:#c06;}
#wrapper span.next{right:5px;border-right:none;border-left-color:#c06;}
</style>
</head>
<body>
<div id="wrapper">
<div class="meaquee-wra">
<ul id="meaquee">
<li><img src="lv.jpg" alt="1" /><a href="#">test1</a></li>
<li class="test"><img src="lv.jpg" alt="2" /><a href="#">test2</a></li>
<li><img src="lv.jpg" alt="3" /><a href="#">test3</a></li>
<li><img src="lv.jpg" alt="4" /><a href="#">test4</a></li>
<li><img src="lv.jpg" alt="5" /><a href="#">test5</a></li>
</ul>
</div>
<span class="pre">pre</span>
<span class="next">next</span>
</div>
<script>
var n = 0;
function allEffect(a,e,c){
/*if(!this.G(a)){
return false
}*/
//var e = this.G(a).getElementsByTagName(e);
//this.meaquee(a)
//setTimeout("allEffect('meaquee','li','test')",30);
};
allEffect.prototype = {
G:function(a){
return document.getElementById(a);
},
E:function(c){
var n = document.getElementsByTagName("*"),
_$class=[];
for(i=0;i<n.length;i++){
var nodeClass = n[i].className
if(nodeClass==c){
_$class.push(nodeClass);
}
}
return _$class
},
meaquee:function(a,d){
var masterId = this.G(a),
childEle = masterId.getElementsByTagName(d),
parentElc = masterId.parentNode,
ofragment = document.createDocumentFragment(),
time = false;
for(i=0;i<childEle.length;i++){
childEle[i].onmouseover = function(){
clearInterval(t)
};
parentElc.onmousedown = function(){
alert(1)
//setInterval('this.meaquee("meaquee","li")',30)
}
if(childEle.length<10){
copyCon = document.createElement("li");
copyCon.innerHTML = childEle[i].innerHTML;
ofragment.appendChild(copyCon);
masterId.appendChild(ofragment);
}
}
iniParW = (childEle.length+1) * childEle[0].clientWidth;
masterId.style.width = iniParW + 'px';
if(n>=parentElc.clientWidth/2){
n=0;
}
masterId.style.left= - + n + 'px';
n++;
}
}
var show = new allEffect(),
m = 0;
t = setInterval('show.meaquee("meaquee","li")',30);
</script>
</body>
</html>
图片你随便改个就好了
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js-exerctice</title>
<style>
body{font-size:12px;}
ul,li,div,span{padding:0;margin:0;}
#wrapper{border:1px solid #c06;width:750px;margin:50px auto;position:relative;zoom:1;overflow:hidden;}
.meaquee-wra{width:720px;height:137px;margin:0 auto;overflow:hidden;}
#meaquee{background:#fff;position:absolute;left:0;top:0;position:relative}
#copyCon{float:left;}
#wrapper li{text-align:center;float:left;list-style:none;_display:inline;margin-left:10px;}
#wrapper li img{width:100px;height:120px;display:block;border:none;}
#wrapper span{position:absolute;top:65px;text-indent:-9999px;display:block;border:8px solid #fff;cursor:pointer;width:0;height:0;overflow:hidden;}
#wrapper span.pre{left:5px;border-left:none;border-right-color:#c06;}
#wrapper span.next{right:5px;border-right:none;border-left-color:#c06;}
</style>
</head>
<body>
<div id="wrapper">
<div class="meaquee-wra">
<ul id="meaquee">
<li><img src="lv.jpg" alt="1" /><a href="#">test1</a></li>
<li class="test"><img src="lv.jpg" alt="2" /><a href="#">test2</a></li>
<li><img src="lv.jpg" alt="3" /><a href="#">test3</a></li>
<li><img src="lv.jpg" alt="4" /><a href="#">test4</a></li>
<li><img src="lv.jpg" alt="5" /><a href="#">test5</a></li>
</ul>
</div>
<span class="pre">pre</span>
<span class="next">next</span>
</div>
<script>
var n = 0;
function allEffect(a,e,c){
/*if(!this.G(a)){
return false
}*/
//var e = this.G(a).getElementsByTagName(e);
//this.meaquee(a)
//setTimeout("allEffect('meaquee','li','test')",30);
};
allEffect.prototype = {
G:function(a){
return document.getElementById(a);
},
E:function(c){
var n = document.getElementsByTagName("*"),
_$class=[];
for(i=0;i<n.length;i++){
var nodeClass = n[i].className
if(nodeClass==c){
_$class.push(nodeClass);
}
}
return _$class
},
meaquee:function(a,d){
var masterId = this.G(a),
childEle = masterId.getElementsByTagName(d),
parentElc = masterId.parentNode,
ofragment = document.createDocumentFragment(),
time = false;
for(i=0;i<childEle.length;i++){
childEle[i].onmouseover = function(){
clearInterval(t)
};
parentElc.onmousedown = function(){
alert(1)
//setInterval('this.meaquee("meaquee","li")',30)
}
if(childEle.length<10){
copyCon = document.createElement("li");
copyCon.innerHTML = childEle[i].innerHTML;
ofragment.appendChild(copyCon);
masterId.appendChild(ofragment);
}
}
iniParW = (childEle.length+1) * childEle[0].clientWidth;
masterId.style.width = iniParW + 'px';
if(n>=parentElc.clientWidth/2){
n=0;
}
masterId.style.left= - + n + 'px';
n++;
}
}
var show = new allEffect(),
m = 0;
t = setInterval('show.meaquee("meaquee","li")',30);
</script>
</body>
</html>
图片你随便改个就好了
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
Storm代理
2023-07-25 广告
StormProxies是一家可靠的代理服务提供商，提供原生IP（住宅原生IP）和高匿名代理服务。以下是关于StormProxies的原生IP服务的一些信息：1. 住宅原生IP：StormProxies提供的住宅原生IP是指从真实的家庭或企...
点击进入详情页
本回答由Storm代理提供
展开全部
您好！很高兴为您答疑！
您可以参考：http://www.jb51.net/article/4324.htm 这段代码简单明了，您可以修改下直接套用。
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
http://www.blueidea.com/common/shoutbox/redir.asp?2=u&id=11341
到这个网址去看看应该有帮助！~！~
到这个网址去看看应该有帮助！~！~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
