ecshop首页增加某分类下商品图片滚动效果

来源:互联网 发布:movidius 计算棒 知乎 编辑:程序博客网 时间:2024/04/27 22:19

1.首先是ecshop首页调用某分类下的图片,看过我上几篇博客的都知道怎么调用了吧!没看过的可以看看ecshop首页调用某分类下的商品|assign_cat_goods()

提示:

只需要在index.php写上这么一句:assign_cat_goods(34,10);

其中34是分类id,10是调用的条数

assign_cat_goods这个函数是在includes/lib_goods.php里面的

 

2.将下面的代码放到你index.dwt模板页,你想要放置的位置,里面的id=34是分类的id,改为你自己的id,哈哈,我们的ecshop首页增加某分类下图片滚动效果就完成咯,不过css样式你的自己调整哈

<!--图片向左滚动-->
 <div class="pro_new_top">
   <h1><span>梦时潮流风尚</span><a href="category.php?id=34" target="_blank"><img src="images/ban1.jpg" /></a></h1>
 </div>
    <div id="demo">
     <div id="indemo">
      <div id="demo1">
       <!--{foreach from=$cat_goods_34 item=goods}-->
    <a href="{$goods.url}"><img src="{$goods.thumb}" alt="{$goods.name|escape:html}" class="goodsimg" width="200" /></a>
    <!--{/foreach}-->
      </div>
      <div id="demo2"></div>
     </div>
    </div>
<div class="blank5"></div>
    <script>
    <!--
    var speed=10; //数字越大速度越慢
    var tab=document.getElementByIdx_x_x_x("demo");
    var tab1=document.getElementByIdx_x_x_x("demo1");
    var tab2=document.getElementByIdx_x_x_x("demo2");
    tab2.innerHTML=tab1.innerHTML;
    function Marquee(){
    if(tab2.offsetWidth-tab.scrollLeft<=0)
    tab.scrollLeft-=tab1.offsetWidth
    else{
    tab.scrollLeft++;
    }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
    -->
    </script>

<div class="blank"></div>

3.ecshop首页增加某分类下图片滚动效果css我的代码如下:


.pro_new_top{background:#f9f6f4 url(./images/ban1.jpg) no-repeat; height:60px;}
.pro_new_top h1 span{display:none;}
#demo{background: #FFF;overflow:hidden;border: 1px solid #CCC;width: 948px;}
#demo a,img{margin:0;padding:0;}
#indemo{float: left;width: 800%;}
#demo1{float: left;}
#demo2{float: left;}