对于一些公司企业网站，在网站的首页可以通过滚动展示的效果去展示公司的产品，这样可以有效的节省网页的空间，并且能更多的展示产品的图片。对于使用 WordPress 程序去制作公司企业网站时，如果去实现这种滚动展示产品图片的效果呢？

产品滚动展示功能制作步骤

第一步：在网站中需要显示产品滚动效果的 DIV 里插入以下的 HTML 代码，用于调用网站后台某个版块的文章内容；

<!--产品滚动-->
<div id="chanpinzhanshi">
<div id="indemo">
<div id="demo1">
<ul>
<?php if (have_posts()) : ?>
<?php query_posts('cat=2' . $mcatID. '&caller_get_posts=1&showposts=10'); ?>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php%20the_permalink()%20?>"><img src="<?php%20echo%20get_first_image();%20?>" alt="<?php the_title();?> 展示图"><?php echo mb_strimwidth(get_the_title(), 0, 24, ''); ?></a></li>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?>

</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<!--产品滚动-->

第二步：以上的代码中有一个参数 cat=2 ，这里面的 2 为网站后台的分类的 ID 号，可以更换成自己需要调用的分类目录的 ID 号；

第三步：为达到产品滚动展示，我们还需要加一段控制产品滚动的 JS 代码。把以下的 JS 代码放到第一步 HTML 代码的下方。

<script>
<!--
var speed=30;
var tab=document.getElementById("chanpinzhanshi");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

第四步：以上的 JS 控制代码中的参数 var speed=30; 可以控制图片滚动的速度，数值越大，滚动速度越快，可以改成自己需要的滚动速度。

第五步：最后一步就是要滚动区域添加一些 CSS 样式，来控制这个区域的显示效果。在自己的网站模板的 style.css 文件中最下方添加以下的 CSS 样式代码。 （height:246px; width:762px; 是控制滚动区域的高度与宽度，可以改成符合自己网站的尺寸）

.chanpinzhanshi{ height:246px; width:762px; float:left; overflow:hidden;}
.chanpinzhanshi li{ width:163px; height:206px; text-align:center;float:left; margin-right:3px;}
.chanpinzhanshi img{ width:163px; height:206px; margin-bottom:5px;}

#indemo {float: left;width: 8000px;margin-top:3px;}
#demo1 {float: left;}
#demo2 {float: left;}