零基础学做网站培训介绍

当前位置:

怎么做网站产品图片滚动展示功能

很多网站的产品图片都采用滚动展示的效果,我们在学建网站时,也可以制作网站产品图片滚动展示功能。
网站产品图片滚动展示功能

方法如下:

第一步、删除原有图片调用所有代码包括div框。

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


<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
<a href="#"><img src="" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

如果要是调用自动更新的某一分类的文章图片用以下代码(循环代码):(注意:黄色的代码就是上面的缩略图调用代码,如果一个模板没有上面的产品图片模板,这个代码失效,或者要重新操作缩略图步骤。)


<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">
<a href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail() ) { ?><?php the_post_thumbnail( array(160,100)); ?><?php } else {?><img src="<?php echo get_first_image(); ?>" width="160px" height="100px" /><?php }?><br/><?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>

第三步:将以下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 {
overflow:hidden;
width: 550px;
height:170px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
.thumb
{
float:left;
width:170px;
height:150px;
text-align:center;
}
.thumb img
{
width:160px;
height:120px;
}

相关阅读:

JS实现Tab菜单滚动切换的方法

如何制作图片滚动展示横向二级导航菜单

微信小程序可滚动视图区域scroll-view组件

发表评论

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

相关教程

  • 今天分享一款分享产品十佳排行淘客模板,操作简单淘客主题,很符合SEO ,安装即用,给新手少走弯路。该主题是静态页+文章页,首页有16个广告位置。
  • 很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
  • 对于一些公司企业网站,在网站的首页可以通过滚动展示的效果去展示公司的产品,这样可以有效的节省网页的空间,并且能更多的展示产品的图片。对于
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 以下是学做网站论坛关于《Dreamweaver 如何添加网页图片热区链接》视频教程。
  • 在之前的建站教程中,我们讲了如何制作淘宝图片放大镜功能,并给了相应的代码。这是一个固定的HTML代码,很多学习建网站的学员不懂怎么把它与Wordpres
  • 很多网站的产品图片都采用滚动展示的效果,我们在学建网站时,也可以制作网站产品图片滚动展示功能。方法如下:第一步、删除原有图片调用所
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • 有些学员在学习制作网站时,想在自己的网站上添加一些左右滚动的切换图效果,这种效果可以实现自动切换和手动左右切换。如果要实现在网站上增加切换图
  • 感谢VIP学员西宁伍婷无私分享,此模板已通过自己做网站论坛网的审核,大家可放心使用。展示一个桶装水送水公司网站,这也是我第二次提交作业了,
  • 自加入学做网站 论坛VIP学员至今,已有几个月的时间了,一直忙于工作,没什么时间去认真的学习,自从看到论坛中设了这个学员网站模板展示板快,那么多
  • 展示一下我仿的LED灯具厂网站,仿的是一个灯具厂的网站,它的业务是“生产出极具市场竞争力的产品。产品广泛应用于国家和地区的重点工程建设及市政建设
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 多站点 (Multisite) 功能是 WordPress 3.0  版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手工