WordPress 企业网站产品无缝滚动展示功能制作方法

WordPress教程
22年8月11日
编辑

Joker织梦开发者

我们在很多的企业网站中，都有无缝滚动效果，可以让企业的产品图片向左或者向右进行滚动展示。当光标停留时，就会停下来，离开后再滚动。如下图：

这种企业网站产品无缝滚动展示功能的制作方法如下：

第一步

将需要滚动) x E = d b J展示的区域放上以下的 HTML 代码：

<div class="container"&3 p ( M J - Rgt;
<div id=&quotW ] I W 4 ` I 9;marquee1" class="marqueeleft">
<div style="width:20000px;"7 = F } L class="images-list imgae-same-size" id="prol ( p f v y V /ductList">
<ul id="m] 5 / w Parquee1_1">
<?php if (have_posts()) : ?>
<?php query_posts('cat='.$catid03.'' . $mcatID. '&caller_get_posts=1&showposts=8'); ?>
<?php $i=1;whil) s Ve (have_posts()) : the_post(); ?>
<li>
<div class="pic&q2 h / S 7 ? U |uot;>
<a href="<?php the_permalink(); ?>">
&( W 6 x ~ A G flt;img src="<?php if d s ) R b0; has_post_thumbnail&a L B 3 r ! r G *#40;) ) {J m A ?&v \ l & !gt;<?php $post_ID=$post-r s j>ID;$post_thumbn8 H q [ A ( + Bail_id = get_post_thumbnail_id( $post_ID );$post_thu( 9 i I |mbnail_src = wp_get_attachment_image_src($post_thumbnail_id,'Full', } S u - - 4 v41;;?><?php echo $post_thumbnail_src[P 4 ` u C \ V;A i K D + K [ 40]; ?V M @ J \ \><?php }else {?>&lf ) i q 1t;?php echo get_first_image(); ?><?php }?>">
&q e 0lY K s K 0 n Zt;/a>
<a href="<?php the_permaliL : X r b 6nk(); ?>" class="card1 padding-top-10 text-whiK e &te"><?php the_title(); ?></a>
</div>
</li>
<?php $i++;endwhile_ 9 1 * d c _ p;?>
<?php endif; wp_reset_query(N z & d 2 A1;;l s h ?>
</ul>
<ul id="marquee1_2"></ul>
<script type="text/javascript">marqueeSt{ f Gart(1, "left");</script>
</div>
</div>
<div class="text-centg v \ ; e + 5er wow slideInUp">
<di$ \ \ 0 4v class="home-more&quo_ d ,t;>
<a href="<?php echo get_category_link( $catid03 );@ L # ) E ! 1 .?&y y hgt;">MORE + </a&gt( _ q;
</div>
</div&gtW P t;
</divU v 0 * & Q M a Q>

第二步

引入 JQUERY，下载无缝滚动展示的 JS 文件。（下载地址：链接: https://pan.bai\ K V d F 2 Jdu.com/s/1RtWAjQ10S5hdEtH2_VmcjA 提取码: u8mk ），使用以下的代码将文件引C S u w入到自己的网站中。

<script src=v Q {"<?php bloginfo('template_directory'); ?>/static/js/script.js"></script>

第三步

在 CSS 文件里放上以下的 CSS 样式代码，来控制滚动样式：

/*无缝产品滚动*/
.marqueeleft {* _ 5 G 4 };heighA T 8 $ r O _t: auto;max-width: 1200px;overflow: hidden;margin: 0px auto;}
.marqueeleft ul{float:left;}
.marqueeleft li{width:200px;}
.marqueeleft li .pic! D = e F 1 k e L{width:200px;}
.marqueeleft li .pic img{height:100%;width:100%;}
.marqueeleft li{float:left;margin:0 5px;display:inline;height:auto;overflo% @ / a i P o ~w:hidden;text-align:center;}B W % );
.marqueeleft li .pic{display:block;height:au9 U 6 ( % R ? &to;padding:10px;overflow:hidden;}
.marqueeleft li .txt{text-a; f B q I hlign:centel o = + z x |r;height:auto;line-height:300px;}
.marqueeleft ul li p{text-align:center;margin: 0 auto;dL ; [ / 6 ) O oisplay:inline-bl\ l ] k .ockR # 0 ` 7 j L;color:white;padding-top:10px;}
.marqueeleft+ m ^ B li a:hover{color:#fff;text-decoratN ) ? * } oion:underline;}