编程论坛 → ASP技术论坛

兼容性好的图片滚动代码，能否分享一下？[问题已解决，加给175版主50分！]

tepnidh 发布于 2010-07-22 10:50， 1108 次点击

谢谢您！

[ 本帖最后由 tepnidh 于 2010-7-22 17:00 编辑 ]

7 回复

#2

gupiao1752010-07-22 11:18

程序代码：

<style>
.dhMarquee {width:120px;height:450px;text-align:center;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;}
.mqdemo {margin:0px auto;padding:0px;border:0px;}
.dhScrollA {font-size:12px;display:block;padding:2px;}
</style>
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1">
<div id="mqdemo" class="mqdemo">
<a class="dhScrollA" href="javascript:alert('1')"><img src='1.jpg' width='100px' height='100px'/></a>
<a class="dhScrollA" href="javascript:alert('2')"><img src='2.jpg' width='100px' height='100px'/></a>
<a class="dhScrollA" href="javascript:alert('3')"><img src='3.jpg' width='100px' height='100px'/></a>
</div>
</div>
<script language="javascript">
var speed = 10;
//滚动对象
var oMarquee = document.getElementById("mq");
//内容对象
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetHeight;
var odl = omqdemo.offsetHeight;
var x = parseInt(w/odl)+1;
for(var i=0;i<x;i++){

var o = omqdemo.cloneNode(true);

oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){

oMarquee.scrollTop += iScrollAmount;

var ol = oMarquee.scrollTop;

if(odl-ol<=0){
oMarquee.scrollTop = 0;

}
}
var MyMar = window.setInterval(scroll,speed);
</script>

上下滚动，可以兼容市场上常见的多种浏览器！

#3

gupiao1752010-07-22 11:48

再发一个左右滚动的代码：

程序代码：

<style>
a {font-size:12px;}
.dhMarquee {
width:500px;
height:110px;
line-height:110px;
text-align:center;
margin:0px;
padding-top:8px;
*_padding-top:4px;/*IE*/
border:1px solid #000;
overflow:hidden;
white-space:nowrap;}
.mqdemo {margin:0px;padding:0px;border:0px;}
.dhScrollA img{border:0px;}
</style>
<div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1">
<span id="mqdemo" class="mqdemo">
<a class="dhScrollA" href="javascript:alert('1')"><img src='1.jpg' width='100px' height='100px'/></a>
<a class="dhScrollA" href="javascript:alert('2')"><img src='2.jpg' width='100px' height='100px'/></a>
<a class="dhScrollA" href="javascript:alert('3')"><img src='3.jpg' width='100px' height='100px'/></a>
</span>
</div>
<script language="javascript">
var speed = 90;
//判断浏览器类型
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
//滚动对象
var oMarquee = document.getElementById("mq");
//内容对象
var omqdemo = document.getElementById("mqdemo");
var w = oMarquee.offsetWidth;
var odl = omqdemo.offsetWidth;
var x = parseInt(w/odl)+1;
for(var i=0;i<x;i++){

var o = omqdemo.cloneNode(true);

oMarquee.appendChild(o);
}
var iScrollAmount = 1
function scroll(){

oMarquee.scrollLeft += iScrollAmount;

var ol = oMarquee.scrollLeft;

//IE和FF的位置有不同

if(isMSIE){
  if(odl-ol<=0){
   oMarquee.scrollLeft = 0;
  }

}

else{
  if(odl-ol<=-10){
   oMarquee.scrollLeft = 2;
  }

}
}
var MyMar = window.setInterval(scroll,speed);
</script>

#4

tepnidh2010-07-22 13:54

回复 3楼 gupiao175

非常感谢您，很好用！这里再请教您一下，在左右滚动的代码中，在哪儿能改动图片的间距啊？期待着。。。。。。再次表示谢意！！！...................................给您加50分！

[ 本帖最后由 tepnidh 于 2010-7-22 14:08 编辑 ]

#5

gupiao1752010-07-22 15:06

在style里多加入这么一句控制A的右边距即可：
.dhScrollA{margin-right:25px;}/*25这个数值可以自己定，也可以改小点，自己慢慢调整体会吧!*/

#6

tepnidh2010-07-22 15:27

回复 5楼 gupiao175

谢谢！试了一下，只能调整一组图片的首尾间距，图片间的间距没有变化。

#7

gupiao1752010-07-22 15:46

不会吧，我这里测试FF还是IE6，在每张图片之间都是有间距的！
我是放在这两句之间
.mqdemo {margin:0px;padding:0px;border:0px;}
.dhScrollA{margin-right:25px;}
.dhScrollA img{border:0px;}

#8

tepnidh2010-07-22 16:08

回复 7楼 gupiao175

谢谢您的支持和帮助！我在网上找到了一个代码很好用！您的我再试试，再次感谢！
<style type="text/css">
img{
margin:5px;}
</style>

1