高分求js图片滚动特效

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
    <head>
    <title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="editplus" />
    <meta name="author" content="balibell" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    </head><body>
    <!-- picrotate_left start  -->
    <style type="text/css">
    .blk_18{
    overflow:hidden;zoom:1;
    font-size:12px;
    border:1px solid #e3e3e3;
    background:#f3f3f3;
    width:950px;/*外框的宽度*/
    }
    .blk_18 .pcont{
    width:868px;/*滚动区域的宽度，124×7*/
    float:left;
    overflow:hidden;
    }
    .blk_18 .ScrCont{width:32766px;zoom:1;}
    .blk_18 #List1_1,.blk_18 #List2_1{float:left;}
    .blk_18 .LeftBotton,.blk_18 .RightBotton{width:15px;height:72px;float:left;background:url(images/picr_1.gif) no-repeat;margin:10px 12px 10px 12px}
    .blk_18 .LeftBotton{background-position: 0 0;}
    .blk_18 .RightBotton{background-position: 0 -100px;}
    .blk_18 .LeftBotton:hover{background-position: -20px 0;}
    .blk_18 .RightBotton:hover{background-position: -20px -100px;}
    .blk_18 .pl img{display:block;cursor:pointer;border:none;margin:6px auto 1px auto;}
    .blk_18 .pl{width:122px;border:1px solid #f3f3f3;float:left;float:left;text-align:center;line-height:24px;color:#167bb8;text-decoration:underline;}
    .blk_18 a.pl:hover{border:1px solid #ff9900;color:#ff9900;background:#fff}
    </style>
    <script type="text/javascript">
    <!--
    //图片滚动列表 mengjia 070927
    var Speed_1 = 10; //速度(毫秒)
    var Space_1 = 20; //每次移动(px)
    var PageWidth_1 = 124 * 7; //翻页宽度（PX）
    var interval_1 = 7000; //翻页间隔（毫秒）
    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(){
    //alert(GetObj('List1_1').scrollWidth);
    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>
    <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 -->
    <a class="pl" href="#" target="_blank"><img src="images/11a996f0889.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装1</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a99669cba.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装2</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a996666bf.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装3</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a99647f10.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装4</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a9964303c.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装5</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a99629737.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装6</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a99601cc6.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装7</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a995dd520.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装8</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a995cf262.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装9</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a995a6553.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装10</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a995a50cf.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装11</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a996f0889.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装12</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a99669cba.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装13</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a996666bf.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装14</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a99647f10.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装15</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a9964303c.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装16</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a995dd520.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装17</a>
    <a class="pl" href="#" target="_blank"><img src="images/11a995cf262.jpg" width="96" height="72"/>林嘉欣蓝色魅惑装18</a>
    <!-- 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 class="c"></div>
    <script type="text/javascript">
    <!--
    picrun_ini();
    //-->
    </script>
    <!-- picrotate_left end -->
    </body>
    </html>
      

  2.   

    百度里找关键字：懒人图库
    里头找图片翻转，有很多的，类似你这样的也有，只是界面不同，都是JS+CSS实现的效果！