位置：首页 > CMS教程 > WordPress

wordpress网站如何制作产品滚动展示（wordpress做的网站效果）

发布时间：2023-04-10 10:37:01

文章来源：快乐收录网

访问次数：

对于一些公司企业网站，在网站的首页可以通过滚动展示的效果去展示公司的产品，这样可以有效的节省网页的空间，并且能更多的展示产品的图片。D8Q快乐收录网

对于使用wordpress程序去做企业官方网站 D8Q快乐收录网

时，如果去实现这种滚动展示产品图片的效果呢？D8Q快乐收录网

产品滚动展示功能制作步骤

第一步：在网站中需要显示产品滚动效果的DIV里插入以下的HTML代码，（HTML代码请参考html视频教程）用于调用网站后台某个版块的文章内容；D8Q快乐收录网

第二步：以上的代码中有一个参数 cat=2 ，这里面的2为网站后台的分类的ID号，可以更换成自己需要调用的分类目录的ID号；D8Q快乐收录网

第三步：为达到产品滚动展示，我们还需要加一段控制产品滚动的JS特效代码。把以下的JS代码放到第一步HTML代码的下方。D8Q快乐收录网

var speed=30;D8Q快乐收录网

var tab=document.getElementById("chanpinzhanshi");D8Q快乐收录网

var tab1=document.getElementById("demo1");D8Q快乐收录网

var tab2=document.getElementById("demo2");D8Q快乐收录网

tab2.innerHTML=tab1.innerHTML;D8Q快乐收录网

function Marquee(){D8Q快乐收录网

if(tab2.offsetWidth-tab.scrollLeft<=0)D8Q快乐收录网

tab.scrollLeft-=tab1.offsetWidthD8Q快乐收录网

else{D8Q快乐收录网

tab.scrollLeft++;D8Q快乐收录网

}D8Q快乐收录网

var MyMar=setInterval(Marquee,speed);D8Q快乐收录网

tab.onmouseover=function() {clearInterval(MyMar)};D8Q快乐收录网

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};D8Q快乐收录网

-->D8Q快乐收录网

</script>

第四步：以上的JS控制代码中的参数 var speed=30;可以控制图片滚动的速度，数值越大，滚动速度越快，可以改成自己需要的滚动速度。D8Q快乐收录网

第五步：最后一步就是要滚动区域添加一些CSS样式（CSS相关知识请学习CSS视频教程），来控制这个区域的显示效果。在自己的网站模板的style.css文件中特别下方添加以下的CSS样式代码。D8Q快乐收录网

（height:246px; width:762px; 是控制滚动区域的高度与宽度，可以改成符合自己网站的尺寸）D8Q快乐收录网

.chanpinzhanshi{ height:246px; width:762px; float:left; overflow:hidden;}D8Q快乐收录网

.chanpinzhanshi li{ width:163px; height:206px; text-align:center;float:left; margin-right:3px;}D8Q快乐收录网

.chanpinzhanshi img{ width:163px; height:206px; margin-bottom:5px;}D8Q快乐收录网

#indemo {float: left;width: 8000px;margin-top:3px;}D8Q快乐收录网

#demo1 {float: left;}D8Q快乐收录网

#demo2 {float: left;}

　　《wordpress网站如何制作产品滚动展示（wordpress做的网站效果）》更新于时间：2023-04-10 10:37:01；由本站小编进行发布，目前浏览的小伙伴达到，感谢你们的支持，后期快乐收录网小编会继续为大家更新更多相关的文章，希望广大网友多多关注快乐收录网工作心得栏目，如果觉得本站不错，那就给我们一个分享的支持吧！

wordpress网站如何制作产品滚动展示（wordpress做的网站效果）特别声明

本站快乐收录网提供的wordpress网站如何制作产品滚动展示（wordpress做的网站效果）都来源于网络，不保证文章的准确性和真实性，同时，对于该文章所造成的影响，不由快乐收录网实际控制，在2023-04-10 10:37:01收录时，该网页上的内容，都属于合规合法，如有侵权违规，可以直接联系网站管理员进行整改或删除，快乐收录网不承担任何责任。

快乐收录网：致力于优质、实用的网络站点资源收集与分享！本文地址：https://nav.klxjz.cn/CMS/WordPress/93485.html转载请注明

标签：

资讯分类