如何制作企业网站产品图片滚动展示
2018-11-01 来源：学做网站论坛
很多企业网站的首页都会做一种动态滚动展示企业产品的效果，是企业网站建设常用的方法。既展示了企业的产品，又让整个网站动静结合，不再毫无生气。
如何在自己学做网站过程中，制作企业网站的动态滚动效果呢，下面就是动态滚动图片制作步骤。
第一步、在网站首页需要放置动态滚动效果的地方，找到相应的DIV，删除原有图片调用所有代码包括div框。
第二步、如果是固定的图片展示就放上下面自己的图片div代码：
（1）固定图片滚动代码：
<div id="demo">
<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>
<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标签就是准备滚动的图片的地址，可以根据自己的需要放相应数量的图片，滚动的图片就是自己写的图片地址。）
（2）自动调用网站产品图片代码（适用于wordpress程序）：
<div id="demo">
<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>
<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语言去循环调用网站中某个分类的产品图片。）
第三步：将以下js?代码放到首页底部?</body>上面。（用来控制图片滚动速度，调整数字大小来使图片滚动速度快慢。）
<script>
<!--
var speed=10; //数字越大速度越慢
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>
<!--
var speed=10; //数字越大速度越慢
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样式（可以设置长和高，让整 个滚动效果与自己网站界面相符。）
#demo {
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;
}
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程序下，为学做网站论坛整理的PHP通用代码，不管任何PHP程序只需稍作修改都可以实现自己做网站时需要的滚动效果。
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
最新资讯
热门推荐