首页 Zen Cart 论坛 Zen Cart 下载 Zen Cart 教程 问题解答  
高级搜索
购物车为空

ZenCart首页随机产品横向滚动效果

2012-12-19

昨天有位想要这种效果，今天做出来分享给大家。

安装方法

1.将文件夹YOUR_TEMPLATE改为你模板的名称

2.将includestemplatesYOUR_TEMPLATEtemplatestpl_random_default.php中文件末尾

1 <script type="text/javascript"src="includes/templates/YOUR_TEMPLATE/jscript/random.js"></script>

中YOUR_TEMPLATE改为你模板的名称

3.上传文件即可

使用方法

在需要调用的地方增加

1 <?php
2   require($template->get_template_dir('/tpl_random_default.php',DIR_WS_TEMPLATE,$current_page_base,'templates').'/tpl_random_default.php'); ?>

小技巧

1.修改随机产品个数

修改includestemplatesYOUR_TEMPLATEtemplatestpl_random_default.php

1 $num=10;//随机产品数量

2.删除产品名称或价格，在includestemplatesYOUR_TEMPLATEtemplatestpl_random_default.php将注释名称和价格的下的代码注释

3.更改自动移动速度，在includestemplatesYOUR_TEMPLATEjscriptrandom.js

1 AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间

有朋友说js效果不滚动等原因，但是我自己在默认模板 IE Firefox google chrome测试时都是正常的，今天看到一款jq的图片滚动效果不错，索性就将换来的js换掉，直接套到这个插件里。

安装方法

1.将文件夹YOUR_TEMPLATE改为你模板的名称

2.将includestemplatesYOUR_TEMPLATEcommonhtml_header.php中

1 <?php if (isset($canonicalLink) && $canonicalLink != '') { ?>
2 <link rel="canonical" href="<?php echo $canonicalLink; ?>" />
3 <?php } ?>

下面引入google的jq库

1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"type="text/javascript"></script>

如果模板中已经引入jq库，则可以省略

3.上传文件即可

效果控制

在includestemplatesYOUR_TEMPLATEjscriptjscript_random.js末尾

1 $(document).ready(function(){
2         $("#slideUl").slide({
3             li_size:1, //每次滚动li个数,默认一屏
4             speed:1000, //速度：数值越大，速度越慢（毫秒）默认500
5             timer:4000, //不需要自动滚动删掉该参数
6             li_w:143, //每个li的宽度（包括border,margin,padding,都要算进去）
7             left:"sildeLeft",
8             right:"sildeRight"
9         });
10 });

调用

在在需要调用的地方增加，如在includestemplatesYOUR_TEMPLATEcommontpl_header.php中增加

1 <?php
2   if ($this_is_home_page) {
3    require($template->get_template_dir('/tpl_random_default.php',DIR_WS_TEMPLATE,$current_page_base,'templates').'/tpl_random_default.php');
4 }
5  ?>