wordpress网站如何制作产品滚动展示
2018-11-02 来源：学做网站论坛
对于一些公司企业网站，在网站的首页可以通过滚动展示的效果去展示公司的产品，这样可以有效的节省网页的空间，并且能更多的展示产品的图片。
对于使用wordpress程序去做企业官方网站时，如果去实现这种滚动展示产品图片的效果呢？
产品滚动展示功能制作步骤
第一步：在网站中需要显示产品滚动效果的DIV里插入以下的HTML代码，（HTML代码请参考html视频教程）用于调用网站后台某个版块的文章内容；
<!--产品滚动-->
<div class="chanpinzhanshi" id="chanpinzhanshi">
<div id="indemo">
<div id="demo1">
<ul>
<?php if (have_posts()) : ?>
<?php query_posts('cat=2' . $mcatID. '&caller_get_posts=1&showposts=10'); ?>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><img src="<?php echo get_first_image(); ?>" alt="<?php the_title();?>展示图"><?php echo mb_strimwidth(get_the_title(), 0, 24, ''); ?></a></li>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<!--产品滚动-->
<div class="chanpinzhanshi" id="chanpinzhanshi">
<div id="indemo">
<div id="demo1">
<ul>
<?php if (have_posts()) : ?>
<?php query_posts('cat=2' . $mcatID. '&caller_get_posts=1&showposts=10'); ?>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><img src="<?php echo get_first_image(); ?>" alt="<?php the_title();?>展示图"><?php echo mb_strimwidth(get_the_title(), 0, 24, ''); ?></a></li>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<!--产品滚动-->
第二步：以上的代码中有一个参数 cat=2 ，这里面的2为网站后台的分类的ID号，可以更换成自己需要调用的分类目录的ID号；
第三步：为达到产品滚动展示，我们还需要加一段控制产品滚动的JS特效代码。把以下的JS代码放到第一步HTML代码的下方。
<script>
<!--
var speed=30;
var tab=document.getElementById("chanpinzhanshi");
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=30;
var tab=document.getElementById("chanpinzhanshi");
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>
第四步：以上的JS控制代码中的参数?var speed=30;可以控制图片滚动的速度，数值越大，滚动速度越快，可以改成自己需要的滚动速度。
第五步：最后一步就是要滚动区域添加一些CSS样式（CSS相关知识请学习CSS视频教程），来控制这个区域的显示效果。在自己的网站模板的style.css文件中最下方添加以下的CSS样式代码。
（height:246px; width:762px; 是控制滚动区域的高度与宽度，可以改成符合自己网站的尺寸）
.chanpinzhanshi{ height:246px; width:762px; float:left; overflow:hidden;}
.chanpinzhanshi li{ width:163px; height:206px; text-align:center;float:left; margin-right:3px;}
.chanpinzhanshi img{ width:163px; height:206px; margin-bottom:5px;}
#indemo {float: left;width: 8000px;margin-top:3px;}
#demo1 {float: left;}
#demo2 {float: left;}
.chanpinzhanshi li{ width:163px; height:206px; text-align:center;float:left; margin-right:3px;}
.chanpinzhanshi img{ width:163px; height:206px; margin-bottom:5px;}
#indemo {float: left;width: 8000px;margin-top:3px;}
#demo1 {float: left;}
#demo2 {float: left;}
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
最新资讯
热门推荐