zoukankan      html  css  js  c++  java
  • 2个按钮控制的左右图片滚动特效代码

    代码简介:

    不错一款图片无缝滚动特效,前后各有一按钮用来控制图片的控制,当然,也可以不控制,这样由JS代码自动云控制滚动,比较适合于产品列表,推荐图文等版块,看上去真不错。

    代码内容:

    View Code
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>2个按钮控制的左右图片滚动特效代码 - www.webdm.cn</title>
    <style type="text/css">
    a
    { color:#213f71; font-size:9pt; text-decoration:none;}
    a:hover
    {color:#0066cc; }
    .blk_18
    {
    overflow
    :hidden;
    zoom
    :1;
    font-size
    :9pt;
    border
    :1px solid #e3e3e3;
    background
    :#eee;
    width
    :692px;
    margin-top
    :8px;
    }
    .blk_18 .pcont
    {
    width
    :638px;
    float
    :left;
    overflow
    :hidden;
    padding-left
    :5px;
    }
    .blk_18 .ScrCont
    {
    width
    :32766px;
    zoom
    :1;
    margin-left
    :-5px;
    }
    .blk_18 #List1_1, .blk_18 #List2_1
    {
    float
    :left;
    }
    .blk_18 .LeftBotton, .blk_18 .RightBotton
    {
    width
    :15px;
    height
    :74px;
    float
    :left;
    background
    :url(http://www.webdm.cn/images/20091006/ax.gif) no-repeat;
    }
    .blk_18 .LeftBotton
    {
    background-position
    : 0 0;
    margin
    :8px 5px 0;
    }
    .blk_18 .RightBotton
    {
    background-position
    : 0 -100px;
    margin
    :8px 1px 10px 5px;
    }
    .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
    :105px;
    border
    :1px solid #f3f3f3;
    float
    :left;
    float
    :left;
    text-align
    :center;
    line-height
    :24px;
    }
    .blk_18 a.pl:hover
    {
    border
    :1px solid #5dacec;
    color
    :#5dacec;
    background
    :#fff;
    }
    </style>
    <script type="text/javascript">

    var Speed_1 = 10; //速度(毫秒)
    var Space_1 = 20; //每次移动(px)
    var PageWidth_1 = 107 * 6; //翻页宽度
    var interval_1 = 5000; //翻页间隔时间
    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>
    </head>
    <body>
    <!-- picrotate_left start -->
    <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="#" ><img src="http://www.webdm.cn/images/wall1_s.jpg" alt="" width="96" height="72"/>

    片一</a>
    <a class="pl"href="#"> <img src="http://www.webdm.cn/images/wall2_s.jpg" alt="" width="96" height="72"/>图片

    </a>
    <a class="pl" href="#"><img src="http://www.webdm.cn/images/wall3_s.jpg" alt=""width="96" height="72"/>图片

    </a>
    <a class="pl" href="#"><img src="http://www.webdm.cn/images/wall4_s.jpg" alt="" width="96" height="72"/>图片

    </a>
    <a class="pl" href="#"><img src="http://www.webdm.cn/images/wall5_s.jpg" alt="" width="96" height="72"/>图片

    </a>
    <a class="pl" href="#"><img src="http://www.webdm.cn/images/wall6_s.jpg" alt="" width="96" height="72"/>图片

    </a>
    <a class="pl" href="#"><img src="http://www.webdm.cn/images/wall7_s.jpg" alt="" width="96" height="72"/>图片

    </a>
    <a class="pl" href="#" ><img src="http://www.webdm.cn/images/wall8_s.jpg" alt="" width="96" height="72"/>

    片八</a>
    <a class="pl" href="#" ><img src="hthttp://www.webdm.cn/images/wall1_s.jpg" alt="" width="96" height="72"/>

    图片九</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>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!

    </p>

    代码来自http://www.webdm.cn/webcode/eed5beac-6d8d-4c3d-8f3c-2f3efc775ff8.html

  • 相关阅读:
    【贪心】【堆】Gym
    【并查集】Gym
    【拓扑排序】【bitset】Gym
    【递归】【线段树】【堆】AtCoder Regular Contest 080 E
    【二分图】【并查集】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem L. Canonical duel
    【动态规划】【滚动数组】【bitset】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem J. Terminal
    【二分】【字符串哈希】【二分图最大匹配】【最大流】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem I. Minimum Prefix
    【枚举】【最小表示法】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem F. Matrix Game
    【推导】【构造】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem E. Space Tourists
    【推导】【贪心】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem D. Clones and Treasures
  • 原文地址:https://www.cnblogs.com/webdm/p/2314241.html
Copyright © 2011-2022 走看看