推荐两款JS写的带按钮的图片滚动效果

作者 :
免费
  • 正文
  • <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">

    <style type="text/css">
    body {
    position:relative;
    margin:0;
    padding:55px 0 0 0;
    }
    </style>
    <title>带左右箭头切换的自动滚动图片JS特效</title>
    <style type="text/css">
    <!--
    .rollBox {
    width:704px;
    overflow:hidden;
    padding:12px 0 5px 6px;
    margin:0 auto;
    }
    .rollBox .LeftBotton {
    height:52px;
    width:19px;
    background:url(./img/button.gif) no-repeat 11px 0;
    overflow:hidden;
    float:left;
    display:inline;
    margin:25px 0 0 0;
    cursor:pointer;
    }
    .rollBox .RightBotton {
    height:52px;
    width:20px;
    background:url(./img/button.gif) no-repeat -8px 0;
    overflow:hidden;
    float:left;
    display:inline;
    margin:25px 0 0 0;
    cursor:pointer;
    }
    .rollBox .Cont {
    width:530px;
    overflow:hidden;
    float:left;
    }
    .rollBox .ScrCont {
    width:10000000px;
    }
    .rollBox .Cont .pic {
    width:132px;
    float:left;
    text-align:center;
    }
    .rollBox .Cont .pic img {
    padding:4px;
    background:#fff;
    border:1px solid #ccc;
    display:block;
    margin:0 auto;
    }
    .rollBox .Cont .pic p {
    line-height:26px;
    color:#505050;
    }
    .rollBox .Cont a:link, .rollBox .Cont a:visited {
    color:#626466;
    text-decoration:none;
    }
    .rollBox .Cont a:hover {
    color:#f00;
    text-decoration:underline;
    }
    .rollBox #List1, .rollBox #List2 {
    float:left;
    }
    -->
    </style>

    </head>
    <body>

    <div>
    <div onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
    <div id="ISL_Cont">
    <div>
    <div id="List1">
    <!-- 图片列表 begin -->
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1327DT20080906220904.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1091DT20080906180505.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1322DT20080906204943.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1323DT20080906204943.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1324DT20080906205503.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1327DT20080906220904.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1325DT20080906205624.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <!-- 图片列表 end -->
    </div>
    <div id="List2">
    <!-- 图片列表 begin -->
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1327DT20080906220904.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1091DT20080906180505.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1322DT20080906204943.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1323DT20080906204943.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1324DT20080906205503.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1327DT20080906220904.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <div> <a href="#" target="_blank"><img src="./img/U2716P6T64D51897F1325DT20080906205624.jpg" width="109" height="87"></a>
    <p><a href="#" target="_blank">带左右箭头切换</a></p>
    </div>
    <!-- 图片列表 end -->
    </div>
    </div>
    </div>
    <div onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
    </div>
    <script language="javascript" type="text/javascript">
    <!--//--><![CDATA[//><!--
    //图片滚动列表 5icool.org
    var Speed = 1; //速度(毫秒)
    var Space = 5; //每次移动(px)
    var PageWidth = 528; //翻页宽度
    var fill = 0; //整体移位
    var MoveLock = false;
    var MoveTimeObj;
    var Comp = 0;
    var AutoPlayObj = null;
    GetObj("List2").innerHTML = GetObj("List1").innerHTML;
    GetObj('ISL_Cont').scrollLeft = fill;
    GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
    GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
    AutoPlay();
    function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
    function AutoPlay(){ //自动滚动
    clearInterval(AutoPlayObj);
    AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间
    }
    function ISL_GoUp(){ //上翻开始
    if(MoveLock) return;
    clearInterval(AutoPlayObj);
    MoveLock = true;
    MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
    }
    function ISL_StopUp(){ //上翻停止
    clearInterval(MoveTimeObj);
    if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
    Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
    CompScr();
    }else{
    MoveLock = false;
    }
    AutoPlay();
    }
    function ISL_ScrUp(){ //上翻动作
    if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
    GetObj('ISL_Cont').scrollLeft -= Space ;
    }
    function ISL_GoDown(){ //下翻
    clearInterval(MoveTimeObj);
    if(MoveLock) return;
    clearInterval(AutoPlayObj);
    MoveLock = true;
    ISL_ScrDown();
    MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
    }
    function ISL_StopDown(){ //下翻停止
    clearInterval(MoveTimeObj);
    if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
    Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
    CompScr();
    }else{
    MoveLock = false;
    }
    AutoPlay();
    }
    function ISL_ScrDown(){ //下翻动作
    if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
    GetObj('ISL_Cont').scrollLeft += Space ;
    }
    function CompScr(){
    var num;
    if(Comp == 0){MoveLock = false;return;}
    if(Comp < 0){ //上翻
    if(Comp < -Space){
    Comp += Space;
    num = Space;
    }else{
    num = -Comp;
    Comp = 0;
    }
    GetObj('ISL_Cont').scrollLeft -= num;
    setTimeout('CompScr()',Speed);
    }else{ //下翻
    if(Comp > Space){
    Comp -= Space;
    num = Space;
    }else{
    num = Comp;
    Comp = 0;
    }
    GetObj('ISL_Cont').scrollLeft += num;
    setTimeout('CompScr()',Speed);
    }
    }
    //--><!]]>
    </script>
    <br>
    <br></body>
    </html>
    带箭头的左右图片滚动 带箭头的自动左右滚动

    END
    如本资源侵犯了您的权益,请联系投诉邮箱admin@wmphp.com进行举报!我们将在收到邮件的1个小时内处理完毕。 本站仅为平台,发布的资源均为用户投稿或转载!所有资源仅供参考学习使用,请在下载后的24小时内删除,禁止商用! Wmphp.com(完美源码)助力正版,如您有自己的原创产品,可以联系客服投稿,代理出售! Wmphp.com(完美源码)客服QQ:136882447 Wmphp.com(完美源码)商务电话(仅对企业客户/个人用户):15120086569 (微信同步) 请注意:本站不提供任何免费的技术咨询服务,为了节约时间,下载前 请确认自己会技术
    完美源码 » 推荐两款JS写的带按钮的图片滚动效果
    3467+

    本站勉强运行

    3649+

    用户总数

    689+

    资源总数

    0+

    今日更新

    2024-3-11

    最后更新时间