如何制作企業(yè)網(wǎng)站產(chǎn)品圖片滾動展示
2018-11-01 來源：學做網(wǎng)站論壇
很多企業(yè)網(wǎng)站的首頁都會做一種動態(tài)滾動展示企業(yè)產(chǎn)品的效果，是企業(yè)網(wǎng)站建設常用的方法。既展示了企業(yè)的產(chǎn)品，又讓整個網(wǎng)站動靜結合，不再毫無生氣。
如何在自己學做網(wǎng)站過程中，制作企業(yè)網(wǎng)站的動態(tài)滾動效果呢，下面就是動態(tài)滾動圖片制作步驟。
第一步、在網(wǎng)站首頁需要放置動態(tài)滾動效果的地方，找到相應的DIV，刪除原有圖片調(diào)用所有代碼包括div框。
第二步、如果是固定的圖片展示就放上下面自己的圖片div代碼：
（1）固定圖片滾動代碼：
<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>
（說明：IMG標簽就是準備滾動的圖片的地址，可以根據(jù)自己的需要放相應數(shù)量的圖片，滾動的圖片就是自己寫的圖片地址。）
（2）自動調(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>
（說明：不需要人工去放圖片的地址，通過PHP語言去循環(huán)調(diào)用網(wǎng)站中某個分類的產(chǎn)品圖片。）
第三步：將以下js?代碼放到首頁底部?</body>上面。（用來控制圖片滾動速度，調(diào)整數(shù)字大小來使圖片滾動速度快慢。）
<!--
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>
第四步、復制以下css樣式（可以設置長和高，讓整 個滾動效果與自己網(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;
}
以上制作滾動圖片效果的方法可以適用于任何PHP程序下，為學做網(wǎng)站論壇整理的PHP通用代碼，不管任何PHP程序只需稍作修改都可以實現(xiàn)自己做網(wǎng)站時需要的滾動效果。
標簽： seo 代碼 企業(yè)網(wǎng)站 網(wǎng)站建設 制作企業(yè)網(wǎng)站
版權申明：本站文章部分自網(wǎng)絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。
