不间断横向滚动图片的DIY模块 For Discuz X2

横排不间断滚动图片列表的效果，具体看下图，演示站忘记了，目前没有。

站帮网Discuz教程交流超级群：96957547（满），95816304

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

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

复制代码

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

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

复制代码

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

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

复制代码

本文转载来自我的个人博客：http://www.h517.com/475.html

有问题可以直接在我博客回复，都会一一解答的。

更多免费模板和插件请进入站帮网：http://www.zhanhelp.com/

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

不明白这句话的意思...

来学习了

好东西必须顶上

   会和dz的js冲突么？？？？呵呵。。。 收藏了先

这就是脚本滚动文件。不错。！

RainXz 发表于 2011-10-13 09:22
在你需要添加滚动图片的地方，添加下面htm代码

不明白这句话的意思...

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

不明白这句话的意思...

好东西，以后会用上，谢谢

感谢了。。

谢谢!很有帮助。