ECSHOP推荐商品在首页滚动展示
今天青岛网站建设跟大家分享一下ECSHOP实现推荐商品在首页的滚动显示。这些商品为推荐商品。
那么我们需要修改的文件为index.dwt和模板目录/library/recommend_best.lbi文件。
首先我们将首页模板 index.dwt中的<!-- #BeginLibraryItem "/library/recommend_best.lbi" --><!-- #EndLibraryItem --> 放在需要显示滚动商品的位置。
第二步，修改recommend_best.lbi，用来滚动显示的内容。
代码如下：
<div id="marquee">
<dl>
<dt>
<!--{foreach from=$best_goods item=goods}-->
<div class="goodsItem">
<!--<span class="best"></span>-->
<a href="{$goods.url}"><img src="{$goods.thumb}" alt="{$goods.name|escape:html}" class="goodsimg" /></a><br />
<p><a href="{$goods.url}" title="{$goods.name|escape:html}">{$goods.short_style_name}</a></p>
</div>
<!--{/foreach}-->
</dt>
<dd></dd>
</dl>
</div>
样式表文件如下：
<style type="text/css">
#marquee {
position:relative;
width: 800px; /*这里是滚动的宽度*/
overflow:hidden;
}
#marquee img {
border:0px;
}
#marquee dl, #marquee dt,#marquee dd,#marquee a {
float:left;
margin:0;
padding:0;
}
#marquee dl{
width:1000%;
height:186px; /*这里是滚动的高度*/
}
</style>
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
original = container.getElementsByTagName("dt")[0],
clone = container.getElementsByTagName("dd")[0],
speed = arguments[1] || 15; //这里是滚动延迟，数值越小速度越快。
clone.innerHTML=original.innerHTML;
var rolling = function(){
if(container.scrollLeft == clone.offsetLeft){
container.scrollLeft = 0;
}else{
container.scrollLeft++;
}
}
var timer = setInterval(rolling,speed)//设置定时器
container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
}
window.onload = function(){
Marquee("marquee");
}
</script>
经过上面的设置之后，我们就实现了，在首页滚动显示推荐商品列表的功能了，具体的参数设置参见代码注释。
本文来自 青岛网站建设 转载请注明出处，谢谢合作！