零基础学做网站培训介绍

当前位置:

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

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

企业网站产品无缝滚动展示

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

第一步:将需要滚动展示的区域放上以下的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 ),使用以下的代码将文件引入到自己的网站中。


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

第三步:在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;}

通过以上三步就可以自己制作出网站产品无缝滚动展示功能了。

发表评论

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

相关教程

  • 做网站时,为了达到滚动展示图片的效果,我们需要在网站上添加滚动代码,滚动分为四种形,向上滚动、向下滚动、向左滚动、向右滚动。(相关知识:HTML
  • 提供一款jQuery左右无缝轮播图代码,特别适合新手建网站使用。可用于各类网站制作banner轮播图,尺寸可以根据自己网站进行修改。jQuery左右无缝轮
  • 由于网站的篇幅是有限的,如果想在固定的区域内展示更多的内容,滚动展示是一个很好的方法。例如学做网站论坛首页有一个学习问答区,就是使用滚动展示
  • 很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • 有些学员在学习制作网站时,想在自己的网站上添加一些左右滚动的切换图效果,这种效果可以实现自动切换和手动左右切换。如果要实现在网站上增加切换图