wordpress網(wǎng)站如何制作產(chǎn)品滾動展示
2018-11-02 來源：學做網(wǎng)站論壇
對于一些公司企業(yè)網(wǎng)站，在網(wǎng)站的首頁可以通過滾動展示的效果去展示公司的產(chǎn)品，這樣可以有效的節(jié)省網(wǎng)頁的空間，并且能更多的展示產(chǎn)品的圖片。
對于使用wordpress程序去做企業(yè)官方網(wǎng)站時，如果去實現(xiàn)這種滾動展示產(chǎn)品圖片的效果呢？
產(chǎn)品滾動展示功能制作步驟
第一步：在網(wǎng)站中需要顯示產(chǎn)品滾動效果的DIV里插入以下的HTML代碼，（HTML代碼請參考html視頻教程）用于調(diào)用網(wǎng)站后臺某個版塊的文章內(nèi)容；
<div class="chanpinzhanshi" 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 the_permalink() ?>"><img src="<?php echo get_first_image(); ?>" 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>
<!--產(chǎn)品滾動-->
第二步：以上的代碼中有一個參數(shù) cat=2 ，這里面的2為網(wǎng)站后臺的分類的ID號，可以更換成自己需要調(diào)用的分類目錄的ID號；
第三步：為達到產(chǎn)品滾動展示，我們還需要加一段控制產(chǎn)品滾動的JS特效代碼。把以下的JS代碼放到第一步HTML代碼的下方。
<!--
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控制代碼中的參數(shù)?var speed=30;可以控制圖片滾動的速度，數(shù)值越大，滾動速度越快，可以改成自己需要的滾動速度。
第五步：最后一步就是要滾動區(qū)域添加一些CSS樣式（CSS相關(guān)知識請學習CSS視頻教程），來控制這個區(qū)域的顯示效果。在自己的網(wǎng)站模板的style.css文件中最下方添加以下的CSS樣式代碼。
（height:246px; width:762px; 是控制滾動區(qū)域的高度與寬度，可以改成符合自己網(wǎng)站的尺寸）
.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;}
標簽： seo 代碼 企業(yè)網(wǎng)站 網(wǎng)站模板 網(wǎng)站如何制作
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
