学做网站培训课程介绍

当前位置:

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

很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
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程序只需稍作修改都可以实现自己做网站时需要的滚动效果。

发表评论

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

相关教程

  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • 很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • 今天分享一款分享产品十佳排行淘客模板,操作简单淘客主题,很符合SEO ,安装即用,给新手少走弯路。该主题是静态页+文章页,首页有16个广告位置。
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 在之前的建站教程中,我们讲了如何制作淘宝图片放大镜功能,并给了相应的代码。这是一个固定的HTML代码,很多学习建网站的学员不懂怎么把它与Wordpres
  • 感谢VIP学员西宁伍婷无私分享,此模板已通过自己做网站论坛网的审核,大家可放心使用。展示一个桶装水送水公司网站,这也是我第二次提交作业了,
  • 自加入学做网站 论坛VIP学员至今,已有几个月的时间了,一直忙于工作,没什么时间去认真的学习,自从看到论坛中设了这个学员网站模板展示板快,那么多