PetitQ<script src="<?php bloginfo('template_directory'); ?>/static/js/script.js"></script>
WordPress教程
WordPress 企业网站产品无缝滚动展示功能制作方法
收藏
我们在很多的企业网站中，都有无缝滚动效果，可以让企业的产品图片向左或者向右进行滚动展示。当光标停留时，就会停下来，离开后再滚动。如下图：
这种企业网站产品无缝滚动展示功能的制作方法如下：
第一步
将需要滚动展示的区域放上以下的 HTML 代码：
也想出现在这里？联系我们吧
<div class="container">
<div id="marquee1" class="marqueeleft">
<div style="width:20000px;" class="images-list imgae-same-size" id="productList">
<ul id="marquee1_1">
<?php if (have_posts()) : ?>
<?php query_posts('cat='.$catid03.'' . $mcatID. '&caller_get_posts=1&showposts=8'); ?>
<?php $i=1;while (have_posts()) : the_post(); ?>
<li>
<div class="pic">
<a href="<?php the_permalink(); ?>">
<img src="<?php if ( has_post_thumbnail() ) { ?><?php $post_ID=$post->ID;$post_thumbnail_id = get_post_thumbnail_id( $post_ID );$post_thumbnail_src = wp_get_attachment_image_src($post_thumbnail_id,'Full');?><?php echo $post_thumbnail_src[0]; ?><?php }else {?><?php echo get_first_image(); ?><?php }?>">
</a>
<a href="<?php the_permalink(); ?>" class="card1 padding-top-10 text-white"><?php the_title(); ?></a>
</div>
</li>
<?php $i++;endwhile;?>
<?php endif; wp_reset_query(); ?>
</ul>
<ul id="marquee1_2"></ul>
<script type="text/javascript">marqueeStart(1, "left");</script>
</div>
</div>
<div class="text-center wow slideInUp">
<div class="home-more">
<a href="<?php echo get_category_link( $catid03 );?>">MORE + </a>
</div>
</div>
</div>
第二步
引入 JQUERY，下载无缝滚动展示的 JS 文件。（下载地址：链接: https://pan.baidu.com/s/1RtWAjQ10S5hdEtH2_VmcjA 提取码: u8mk ），使用以下的代码将文件引入到自己的网站中。
第三步
在 CSS 文件里放上以下的 CSS 样式代码，来控制滚动样式：
/*无缝产品滚动*/.marqueeleft {height: auto;max-width: 1200px;overflow: hidden;margin: 0px auto;}
.marqueeleft ul{float:left;}
.marqueeleft li{width:200px;}
.marqueeleft li .pic{width:200px;}
.marqueeleft li .pic img{height:100%;width:100%;}
.marqueeleft li{float:left;margin:0 5px;display:inline;height:auto;overflow:hidden;text-align:center;}
.marqueeleft li .pic{display:block;height:auto;padding:10px;overflow:hidden;}
.marqueeleft li .txt{text-align:center;height:auto;line-height:300px;}
.marqueeleft ul li p{text-align:center;margin: 0 auto;display:inline-block;color:white;padding-top:10px;}
.marqueeleft li a:hover{color:#fff;text-decoration:underline;}
通过以上三步就可以自己制作出网站产品无缝滚动展示功能了。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
