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

查看全文

相关阅读:
LeetCode Find Duplicate File in System
LeetCode 681. Next Closest Time
LeetCode 678. Valid Parenthesis String
LeetCode 616. Add Bold Tag in String
LeetCode 639. Decode Ways II
LeetCode 536. Construct Binary Tree from String
LeetCode 539. Minimum Time Difference
LeetCode 635. Design Log Storage System
LeetCode Split Concatenated Strings
LeetCode 696. Count Binary Substrings

原文地址：https://www.cnblogs.com/webdm/p/2314241.html