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