cdn网站首页图片自动浏览功能实现

1.网站图片部分布局：：：

<style  type="text/css" charset="utf-8">

.rollbox{width:760px;overflow:hidden;padding:0;margin:12px auto 0;float:right;}
.rollbox .cont{width:655px;overflow:hidden;float:left; no-repeat left center;padding:8px 0 0;}
.rollbox .scrcont{width:2000px;}
.rollbox .cont .pic{width:130px;float:left;text-align:center;}
.rollbox .cont .pic img{display:block;width:118px;height:57px;margin:0 6px;}

</style>

<div class="friendlink_v4">
    <h2>他们都在使用POWERCDN</h2>
    <!--图片滚动-->
    <div class="rollbox">
         <div class="leftbotton leftblue" οnmοusedοwn="ISL_GoUp()" οnmοuseοut="moveon()"><a href="javascript:void(0)"></a></div>
         <div class="cont" id="demo" >
              <div class="scrcont" id="indemo">
                  <div id="demo1" style="float:left">
                    #foreach($DxClient in $!clist)
                    <div class="pic"><a href="/dxclient/list.shtml"><img src="$!DxClient.image"></a></div>
                    #end
                </div>
                <div id="demo2" style="float:left"></div>
            </div>
        </div>
        <div class="rightbotton" οnmοusedοwn="ISL_GoDown()" οnmοuseοut="moveon()"><a href="javascript:void(0)"></a></div>
    </div>
    <!--滚动end-->
</div>

2.js实现图片自动浏览和上翻下翻浏览：：

<!--
var speed=30; //数字越大速度越慢
var PageWidth=130;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("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.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
function moveon(){
    clearInterval(MyMar);
    clearInterval(Marquee);
    MyMar=setInterval(Marquee,speed);
}
function ISL_GoUp(){ //上翻
 clearInterval(MyMar);
  if(tab.scrollLeft <= 0){tab.scrollLeft = tab.scrollLeft + tab1.offsetWidth}
  tab.scrollLeft=tab.scrollLeft-tab.scrollLeft%130;
  tab.scrollLeft -= PageWidth ;
}

function ISL_GoDown(){ //下翻
 clearInterval(MyMar);
 if(tab.scrollLeft >= tab1.scrollWidth){tab.scrollLeft = tab.scrollLeft - tab1.scrollWidth;}
 tab.scrollLeft=tab.scrollLeft-tab.scrollLeft%130;
 tab.scrollLeft += PageWidth ;
}
-->

转载于:https://my.oschina.net/aicoding/blog/90692