善恶资源网专注优秀技术教程分享网-傅汉松!

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

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是企业网站产品无缝滚动展示功能制作方法

傅汉松

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

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

第一步:将需要滚动展示的区域放上以下的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;}

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


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

最新评论
推荐内容
热门文章
随机推荐
资源标签
技术教程 企业网站产品无缝滚动展示功能制作方法
在很多的企业网站中,都有无缝滚动效果,可以让企业的产品图片向左或者向右进行滚动展示。当光标停留时,就会停下来,离开后再滚动。如下图:这种企业网站产品无缝滚动展示...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    73.79ms