零基础学做网站培训介绍

当前位置:

如何制作滚动产品图片展示

很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
d如何制作企业网站产品图片动态滚动

如何在自己学做网站过程中,制作企业网站的动态滚动效果呢,下面就是动态滚动图片制作步骤

第一步、在网站首页需要放置动态滚动效果的地方,找到相应的DIV,删除原有图片调用所有代码包括div框。

第二步、如果是固定的图片展示就放上下面自己的图片div代码:

(1)固定图片滚动代码:

<div id="demo">
<div id="indemo">
<div id="demo1"><a href="#"><img alt="" src="https://www.xuewangzhan.net/wp-content/themes/xwz/images/Course.png" border="0" /></a>
<a href="#"><img alt="" src="https://www.xuewangzhan.net/wp-content/themes/xwz/images/Course.png" border="0" /></a>
<a href="#"><img alt="" src="https://www.xuewangzhan.net/wp-content/themes/xwz/images/Course.png" border="0" /></a>
<a href="#"><img alt="" src="https://www.xuewangzhan.net/wp-content/themes/xwz/images/Course.png" border="0" /></a>
<a href="#"><img alt="" src="https://www.xuewangzhan.net/wp-content/themes/xwz/images/Course.png" border="0" /></a>
<a href="#"><img alt="" src="https://www.xuewangzhan.net/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>

(说明:不需要人工去放图片的地址,通过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>

第四步、复制以下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;
}

以上制作滚动图片效果的方法可以适用于任何PHP程序下,为学做网站论坛整理的PHP通用代码,不管任何PHP程序只需稍作修改都可以实现自己做网站时需要的滚动效果。

相关阅读:

如何制作JS+DIV左右滚动的切换图(手动+自动)

如何在网站中加入滚动文字或图片

网站滚动字幕制作代码(文字上下左右滚动)

发表评论

电子邮件地址不会被公开。 必填项已用*标注