對於一些公司企業網站，在網站的首頁可以通過滾動展示的效果去展示公司的產品，這樣可以有效的節省網頁的空間，並且能更多的展示產品的圖片。對於使用 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;}