• 全国400电话网上服务平台
    强大号码库资源任选,方便,快捷,快速开通。
    咨询热线:400-1100-266  

    织梦图片无缝横向滚动
    POST TIME:2020-04-22 22:10
    用织梦建站时,有时可能需要完成一排图片横向无缝滚动的效果,经常用到这种样式的有产品展示,其实做出无缝的图片横向滚动很简单。跟版网整理一下从网上查到的一个js代码的使用方法如下:

    1、把下面样式放到css文件中,用来调整图片大小样式。
    <styletype="text/css">
    <!--
    #demo{
    background:#FFF;
    overflow:hidden;
    border:1pxdashed#CCC;
    width:500px;
    }
    #demoimg{
    border:3pxsolid#F2F2F2;
    }
    #indemo{
    float:left;
    width:800%;
    }
    #demo1{
    float:left;
    }
    #demo2{
    float:left;
    }
    -->
    </style>

    2、把下面代码放到需要滚动的图片列表的位置,其中红色代码的部分可以替换成织梦的图片列表代码。

    <divid="demo">
    <divid="indemo">
    <divid="demo1">
    <ahref="#"><imgsrc="/jscss/demoimg/wall_s1.jpg"border="0"/></a>
    <ahref="#"><imgsrc="/jscss/demoimg/wall_s2.jpg"border="0"/></a>
    <ahref="#"><imgsrc="/jscss/demoimg/wall_s3.jpg"border="0"/></a>
    </div>
    <divid="demo2"></div>
    </div>
    </div>

    <!--下面是js的代码-->
    <script>
    <!--
    varspeed=10;
    vartab=document.getElementById("demo");
    vartab1=document.getElementById("demo1");
    vartab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML;
    functionMarquee(){
    if(tab2.offsetWidth-tab.scrollLeft<=0)
    tab.scrollLeft-=tab1.offsetWidth
    else{
    tab.scrollLeft++;
    }
    }
    varMyMar=setInterval(Marquee,speed);
    tab.onmouseover=function(){clearInterval(MyMar)};
    tab.onmouseout=function(){MyMar=setInterval(Marquee,speed)};
    -->
    </script>

    3、经过上面的设置后,图片列表就应该可以横向向左运动了。
    
    关于我们 | 付款方式 | 建站知识 | 增值服务 | 网站模板
    Copyright © 2003-2016
    时间:9:00-21:00 (节假日不休)
    版权所有:巨人网络(扬州)科技有限公司
    总部地址:江苏省信息产业基地11号楼四层
    《增值电信业务经营许可证》 苏B2-20120278
    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信

    微信号已复制,请打开微信添加咨询详情!