昨天给一个网站最模板美化修改,使用了就收藏下来跟大家一起分享下,希望喜欢的同学可以直接拿去使用



1、添加下面的CSS代码到您使用的风格的CSS文件里面

1
2
#marquee{ position:relative;height:150px; overflow:hidden; width:960px;}
#marquee #content{ position:absolute; width:1000%;}

2、在你需要添加滚动图片的地方,添加下面htm代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="marquee">
<!--[diy=archy_007]--><div id="archy_007" class="area"></div><!--[/diy]-->
<script type="text/javascript">
var Marquee = function(id){
  try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
  var container = document.getElementById(id),
  slide = document.getElementById("content"),
  speed = arguments[1] || 15;
  slide.innerHTML += slide.innerHTML;
  var item = slide.getElementsByTagName("div"),//DIY模板区域的层
  critical = item[item.length/2].offsetLeft,//临界值
  delta = 0;
  var rolling = function(){
delta == -critical ? delta = 0 : delta--;
slide.style.left = delta + "px";
  }
  var timer = setInterval(rolling,speed)//设置定时器
  container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时,清除定时器,停止滚动
  container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
}
window.onload = function(){
  Marquee("marquee");
}
</script>
</div>

3、DIY模板里面使用图片列表模板就可以自由DIY滚动图片了

1
2
3
4
5
<div id="content">
[loop]
<div class="z"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a></div>
[/loop]
</div>

需要的下载看吧,

有3部分,一部分是css  二部分是htm代码  三部分是DIY模板的代码

免费论坛模板下载小图标  不间断横向滚动图片的DIY代码__适用于Discuz_X2.rar 点击下载 文件大小:898 字节
更新时间:2011 年 6 月 30 日 累计下载:603 次