如何制作企業(yè)網(wǎng)站產(chǎn)品圖片滾動(dòng)展示
2018-11-01 來(lái)源：學(xué)做網(wǎng)站論壇
很多企業(yè)網(wǎng)站的首頁(yè)都會(huì)做一種動(dòng)態(tài)滾動(dòng)展示企業(yè)產(chǎn)品的效果，是企業(yè)網(wǎng)站建設(shè)常用的方法。既展示了企業(yè)的產(chǎn)品，又讓整個(gè)網(wǎng)站動(dòng)靜結(jié)合，不再毫無(wú)生氣。
如何在自己學(xué)做網(wǎng)站過(guò)程中，制作企業(yè)網(wǎng)站的動(dòng)態(tài)滾動(dòng)效果呢，下面就是動(dòng)態(tài)滾動(dòng)圖片制作步驟。
第一步、在網(wǎng)站首頁(yè)需要放置動(dòng)態(tài)滾動(dòng)效果的地方，找到相應(yīng)的DIV，刪除原有圖片調(diào)用所有代碼包括div框。
第二步、如果是固定的圖片展示就放上下面自己的圖片div代碼：
（1）固定圖片滾動(dòng)代碼：
<div id="indemo">
<div id="demo1"><a href="#"><img alt="" src="https://www.xuewangzhan.com/wp-content/themes/xwz/images/Course.png" border="0" /></a>
<a href="#"><img alt="" src="https://www.xuewangzhan.com/wp-content/themes/xwz/images/Course.png" border="0" /></a>
<a href="#"><img alt="" src="https://www.xuewangzhan.com/wp-content/themes/xwz/images/Course.png" border="0" /></a>
<a href="#"><img alt="" src="https://www.xuewangzhan.com/wp-content/themes/xwz/images/Course.png" border="0" /></a>
<a href="#"><img alt="" src="https://www.xuewangzhan.com/wp-content/themes/xwz/images/Course.png" border="0" /></a>
<a href="#"><img alt="" src="https://www.xuewangzhan.com/wp-content/themes/xwz/images/Course.png" border="0" /></a></div>
<div id="demo2"></div>
</div>
</div>
（說(shuō)明：IMG標(biāo)簽就是準(zhǔn)備滾動(dòng)的圖片的地址，可以根據(jù)自己的需要放相應(yīng)數(shù)量的圖片，滾動(dòng)的圖片就是自己寫(xiě)的圖片地址。）
（2）自動(dòng)調(diào)用網(wǎng)站產(chǎn)品圖片代碼（適用于wordpress程序）：
<div id="indemo">
<div id="demo1">
<?php if (have_posts()) : ?>
<?php query_posts('cat=1' . $mcatID. '&caller_get_posts=1&showposts=6'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="thumb"><?php include( TEMPLATEPATH . '/thumbnail.php' ); ?><br/><a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 16, ''); ?></a></div>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?>
</div>
<div id="demo2"></div>
</div>
</div>
（說(shuō)明：不需要人工去放圖片的地址，通過(guò)PHP語(yǔ)言去循環(huán)調(diào)用網(wǎng)站中某個(gè)分類的產(chǎn)品圖片。）
第三步：將以下js?代碼放到首頁(yè)底部?</body>上面。（用來(lái)控制圖片滾動(dòng)速度，調(diào)整數(shù)字大小來(lái)使圖片滾動(dòng)速度快慢。）
<!--
var speed=10; //數(shù)字越大速度越慢
var tab=document.getElementById("demo");
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>
第四步、復(fù)制以下css樣式（可以設(shè)置長(zhǎng)和高，讓整 個(gè)滾動(dòng)效果與自己網(wǎng)站界面相符。）
background: #FFF;
overflow:hidden;
width: 500px;
height: 200px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
以上制作滾動(dòng)圖片效果的方法可以適用于任何PHP程序下，為學(xué)做網(wǎng)站論壇整理的PHP通用代碼，不管任何PHP程序只需稍作修改都可以實(shí)現(xiàn)自己做網(wǎng)站時(shí)需要的滾動(dòng)效果。
標(biāo)簽： seo 代碼 企業(yè)網(wǎng)站 網(wǎng)站建設(shè) 制作企業(yè)網(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)系。
