商品详细页面的图片放大效果和缩略图

最新推荐文章于 2024-09-10 14:15:01 发布

小池编程的博客

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量2.9k

点赞数 1

文章标签： function class div border delay html

本文链接：https://blog.csdn.net/nycqwert/article/details/7827632

版权

        1、把左右按钮屏蔽掉
       2、修改 $("#spec-list").jdMarquee({
           deriction:"left",
           width:600,
           下的width
       3、把$("#spec-list img").bind("mouseover",function(){
           var src=$(this).attr("src");
           $("#spec-n1 img").eq(0).attr({
           下的"border":"1px solid #ccc",去掉

4、把#spec-list{}中的width的大小改为100%

引入的js文件和css文件

html代码：

<div id=main_left>
   <div class=jqzoom id=spec-n1 >
   <volist name="xiangxi1" id="vo">

   <IMG height=350
   src="../uploadfile/pic/big/{$vo.photos_pic}" jqimg="../uploadfile/pic/big/{$vo.photos_pic}" width=650>
   </volist>
   </div>
   <div id=spec-n5>
       
       <div id=spec-list>
           <ul class=list-h>
           <volist name="xiangxi" id="vo">
               <li>

   <IMG height=350
   src="../uploadfile/pic/big/{$vo.photos_pic}" >
   </li></volist>


           </ul>
       </div>
       

    </div>

<SCRIPT type=text/javascript>
   $(function(){
       $(".jqzoom").jqueryzoom({
           xzoom:300,
           yzoom:300,
           offset:10,
           position:"right",
           preload:1,
           lens:1
       });
       $("#spec-list").jdMarquee({
           deriction:"left",
           width:700,
           height:86,
           step:2,
           speed:4,
           delay:10,
           control:true,
           _front:"#spec-right",
           _back:"#spec-left"
       });
       $("#spec-list img").bind("mouseover",function(){
           var src=$(this).attr("src");
           $("#spec-n1 img").eq(0).attr({
               src:src.replace("\/n5\/","\/n1\/"),
               jqimg:src.replace("\/n5\/","\/n0\/")
           });
           $(this).css({

               "padding":"1px"
           });
       }).bind("mouseout",function(){
           $(this).css({

               "padding":"2px"
           });
       });
   })
   </SCRIPT>

<SCRIPT src="__PUBLIC__/js/lib.js" type=text/javascript></SCRIPT>
<SCRIPT src="__PUBLIC__/js/163css.js" type=text/javascript></SCRIPT>