求助!!图片滚动效果
2016-07-07 16:04 来源:www.chinab4c.com 作者:ecshop专家
怎样把默认模版的精品推荐改成 由右往左 的滚动效果呢??请高手支下招.. |
回答:
这个要修改模板。用JS去控制滚动。。效果。 |
谁可以共享下,我的这个上下滚动代码有问题的。。。 |
期待ing................. |
百度一下,~有很多的,~ |
嗯,百度了几天了,找出来的都有些瑕疵的。。。 |
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><div id="demo" style="overflow:hidden;width:950px; height:135px;"> <table border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td id="demo1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href=http://www.123.cc/goods.php?id=135 target=_blank><img border=0 src="http://www.123.cc/images/201205/thumb_img/135_thumb_G_1337502670108.jpg" width=110 height=110 </tr> <tr> <td height="25" align="center" bgcolor="#FF6600">金骑士380A刻磨机</td> </tr> </table></td> <td><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href=http://www.123.cc/goods.php?id=135 target=_blank><img border=0 src="http://www.123.cc/images/201205/thumb_img/135_thumb_G_1337502670108.jpg" width=110 height=110 </tr> <tr> <td height="25" align="center" bgcolor="#FF6600">金骑士380A刻磨机</td> </tr> </table></td> <td><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href=http://www.123.cc/goods.php?id=135 target=_blank><img border=0 src="http://www.123.cc/images/201205/thumb_img/135_thumb_G_1337502670108.jpg" width=110 height=110 </tr> <tr> <td height="25" align="center" bgcolor="#FF6600">金骑士380A刻磨机</td> </tr> </table></td> <td><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href=http://www.123.cc/goods.php?id=135 target=_blank><img border=0 src="http://www.123.cc/images/201205/thumb_img/135_thumb_G_1337502670108.jpg" width=110 height=110 </tr> <tr> <td height="25" align="center" bgcolor="#FF6600">金骑士380A刻磨机</td> </tr> </table></td> <td><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href=http://www.123.cc/goods.php?id=135 target=_blank><img border=0 src="http://www.123.cc/images/201205/thumb_img/135_thumb_G_1337502670108.jpg" width=110 height=110 </tr> <tr> <td height="25" align="center" bgcolor="#FF6600">金骑士380A刻磨机</td> </tr> </table></td> <td><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href=http://www.123.cc/goods.php?id=135 target=_blank><img border=0 src="http://www.123.cc/images/201205/thumb_img/135_thumb_G_1337502670108.jpg" width=110 height=110 </tr> <tr> <td height="25" align="center" bgcolor="#FF6600">金骑士380A刻磨机</td> </tr> </table></td> <td><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href=http://www.123.cc/goods.php?id=135 target=_blank><img border=0 src="http://www.123.cc/images/201205/thumb_img/135_thumb_G_1337502670108.jpg" width=110 height=110 </tr> <tr> <td height="25" align="center" bgcolor="#FF6600">金骑士380A刻磨机</td> </tr> </table></td> <td><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href=http://www.123.cc/goods.php?id=135 target=_blank><img border=0 src="http://www.123.cc/images/201205/thumb_img/135_thumb_G_1337502670108.jpg" width=110 height=110 </tr> <tr> <td height="25" align="center" bgcolor="#FF6600">金骑士380A刻磨机</td> </tr> </table></td> <td><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href=http://www.123.cc/goods.php?id=135 target=_blank><img border=0 src="http://www.123.cc/images/201205/thumb_img/135_thumb_G_1337502670108.jpg" width=110 height=110 </tr> <tr> <td height="25" align="center" bgcolor="#FF6600">金骑士380A刻磨机</td> </tr> </table></td> <td><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href=http://www.123.cc/goods.php?id=135 target=_blank><img border=0 src="http://www.123.cc/images/201205/thumb_img/135_thumb_G_1337502670108.jpg" width=110 height=110 </tr> <tr> <td height="25" align="center" bgcolor="#FF6600">金骑士380A刻磨机</td> </tr> </table></td> <td><table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href=http://www.123.cc/goods.php?id=135 target=_blank><img border=0 src="http://www.123.cc/images/201205/thumb_img/135_thumb_G_1337502670108.jpg" width=110 height=110 </tr> <tr> <td height="25" align="center" bgcolor="#FF6600">金骑士380A刻磨机</td> </tr> </table></td> </tr> </table></td> <td id="demo2" valign="top"></td> </tr> </table> </div></td> </tr> </table> <script> var speed=1;//速度数值越大速度越慢 var demo=document.getElementById("demo"); var demo1=document.getElementById("demo1"); var demo2=document.getElementById("demo2"); demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++; } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> 求解!首页插入了这个代码之后, 1,商品详情页插入的这个位置是空白的。 2,用IE浏览图片不圆滑,360浏览器浏览图片正常。 3,商品详情页相册图片是1排的变成2排了。。(4张相册图片上面3张下面1张) |
不行的话就花点钱请人吧 |
6屏左右循环滚动图片代码.zip (136.52 KB) 要图片左右滚动的JS, 还是图片上下滚动的JS |
百度一下 你就知道 |
从右往左滚动,最好能调用新品推荐或者精品什么的。。。 |
我这个是左右滚动的 你可以参考下免费提供给你 网页部分 <!-- {if $new_goods} --> <div class="tlb_item_new clearfix"> <h3 class="title"><img src="../images/good_new_title.gif"alt="スタッフおすすめ!"/></h3> <div class="tlb_item_new_list"> <div class="blk_18"> <a class="LeftBotton" onmousedown="ISL_GoUp_1()" onmouseup="ISL_StopUp_1()" onmouseout="ISL_StopUp_1()" href="javascript:void(0);" target="_self"></a> <div class="pcont" id="ISL_Cont_1"> <div class="ScrCont"> <div id="List1_1"> <!-- piclist begin --> <!--{foreach name="new_goods_name" from=$new_goods item=goods}--> <div class="pl"> <div style="margin-bottom:20px;"><a href="{$goods.url}"><img src="{$goods.goods_img}" alt="" height="120"/></a></div> <a href="{$goods.url}" class="name">{$goods.short_style_name}</a> <p><strong>{$goods.shop_price}</strong></p></div> <!--{/foreach}--> <!-- piclist end --> </div> <div id="List2_1"></div> </div> </div> <a class="RightBotton" onmousedown="ISL_GoDown_1()" onmouseup="ISL_StopDown_1()" onmouseout="ISL_StopDown_1()" href="javascript:void(0);" target="_self"></a> </div> </div> </div> <!-- {/if} --> CSS部分 .tlb_item_new{ width:800px; margin:4px auto; } .tlb_item_new a{ font-size:11px;line-height:1em; text-align:left;} .tlb_item_new p{ margin:6px 0; line-height:11px;} .tlb_item_new .tlb_item_new_list{ margin-bottom:10px;} .tlb_item_new .tlb_item_new_list ol{overflow:hidden; zoom:1; margin:0; padding:0; } .tlb_item_new .tlb_item_new_list li{ float:left; width:190px; height:208px; margin:0 0px; } .blk_18 { overflow:hidden; zoom:1; font-size:9pt; width:780px; } .blk_18 .pcont { width:703px; float:left; overflow:hidden; padding-left:0px; } .blk_18 .ScrCont { width:32766px; zoom:1; margin-left:-5px; } .blk_18 #List1_1, .blk_18 #List2_1 { float:left; } .blk_18 .LeftBotton{ width:30px; height:55px; float:left; background:url(images/new_good/car-btn-prev.png) no-repeat; margin-top:60px; } .blk_18 .RightBotton{width:30px; margin-top:60px; height:55px; float:right; background:url(images/new_good/car-btn-next.png) no-repeat;} .blk_18 .pl img { display:block; cursor:pointer; border:none; margin:6px auto 1px auto; } .blk_18 .pl { width:180px; height:220px; background:url(images/new_good/prod-shadow.png) no-repeat 50px 120px; float:left; float:left; text-align:center; } .blk_18 .name{ width:150px; padding-left:20px; display:block;} JS部分 <script type="text/javascript"> var Speed_1 = 10; //速度(毫秒) var Space_1 = 20; //每次移动(px) var PageWidth_1 = 180 * 4; //翻页宽度 var interval_1 = 3000; //翻页间隔时间 var fill_1 = 0; //整体移位 var MoveLock_1 = false; var MoveTimeObj_1; var MoveWay_1="right"; var Comp_1 = 0; var AutoPlayObj_1=null; function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} function AutoPlay_1(){clearInterval(AutoPlayObj_1);AutoPlayObj_1=setInterval('ISL_GoDown_1();ISL_StopDown_1();',interval_1)} function ISL_GoUp_1(){if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="left";MoveTimeObj_1=setInterval('ISL_ScrUp_1();',Speed_1);} function ISL_StopUp_1(){if(MoveWay_1 == "right"){return};clearInterval(MoveTimeObj_1);if((GetObj('ISL_Cont_1').scrollLeft-fill_1)%PageWidth_1!=0){Comp_1=fill_1-(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1);CompScr_1()}else{MoveLock_1=false} AutoPlay_1()} function ISL_ScrUp_1(){if(GetObj('ISL_Cont_1').scrollLeft<=0){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft+GetObj('List1_1').offsetWidth} GetObj('ISL_Cont_1').scrollLeft-=Space_1} function ISL_GoDown_1(){clearInterval(MoveTimeObj_1);if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="right";ISL_ScrDown_1();MoveTimeObj_1=setInterval('ISL_ScrDown_1()',Speed_1)} function ISL_StopDown_1(){if(MoveWay_1 == "left"){return};clearInterval(MoveTimeObj_1);if(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1-(fill_1>=0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj('ISL_Cont_1').scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false} AutoPlay_1()} function ISL_ScrDown_1(){if(GetObj('ISL_Cont_1').scrollLeft>=GetObj('List1_1').scrollWidth){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft-GetObj('List1_1').scrollWidth} GetObj('ISL_Cont_1').scrollLeft+=Space_1} function CompScr_1(){if(Comp_1==0){MoveLock_1=false;return} var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)<PageWidth_1/2){TempSpace=Math.round(Math.abs(Comp_1/Space_1));if(TempSpace<1){TempSpace=1}} if(Comp_1<0){if(Comp_1<-TempSpace){Comp_1+=TempSpace;num=TempSpace}else{num=-Comp_1;Comp_1=0} GetObj('ISL_Cont_1').scrollLeft-=num;setTimeout('CompScr_1()',TempSpeed)}else{if(Comp_1>TempSpace){Comp_1-=TempSpace;num=TempSpace}else{num=Comp_1;Comp_1=0} GetObj('ISL_Cont_1').scrollLeft+=num;setTimeout('CompScr_1()',TempSpeed)}} function picrun_ini(){ GetObj("List2_1").innerHTML=GetObj("List1_1").innerHTML; GetObj('ISL_Cont_1').scrollLeft=fill_1>=0?fill_1:GetObj('List1_1').scrollWidth-Math.abs(fill_1); GetObj("ISL_Cont_1").onmouseover=function(){clearInterval(AutoPlayObj_1)} GetObj("ISL_Cont_1").onmouseout=function(){AutoPlay_1()} AutoPlay_1(); } </script> |
不好意思我是菜鸟,网页部分我替换了一个库项目,但是CSS和JS应该放到哪个文件的哪一段落中呢。。不胜感激!! |
最近更新
常用插件
- ecshop虚拟发货插件
ecshop虚拟发货插件介绍: ecshop虚拟发货插件,主要为了通过后台手动录...
- ecshop注册审核插件
ecshop插件介绍:ecshop会员注册审核插件,主要是在前台提供给注册的时候...
- ecshop订单聚合插件
ecshop订单聚合插件,主要是为了方便ecshop中订单产品到货情况的分析和...
- ecshop的oss插件
ecshop的oss插件免费共享了,oss,ecshoposs...
- ecshop没登陆情况下订单查
ecshop没登陆情况下订单查询插件,主要是针对ecshop在没有登陆的情况下...
ecshop热门问答
ecshop热门资料
ecshop感叹号
ecshop悬赏
ecshop桌面
ecshop现有的模板亦可
ecshop如何下载模板
ecshop入侵
ecshop关联产品
ecshop看法
ecshop新网互联
ecshop中秋
ecshop修改密码
ecshop问题
ecshop优惠商品
ecshoprank
ecshop滑动
ecshop恢复备份
ecshopEC功能
ecshop导航栏问题
ecshop2011
ecshop样式表
ecshop黄钻
ecshop商品相册
ecshop777
ecshop超限
ecshopmap
ecshop都会
ecshop高级搜索
ecshopwinsock
ecshop姓名
ecshop管理员密码