js控制图片左右滚动
发布时间：01/15 来源： 浏览：
关键词：
<!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> js控制图片左右滚动 </title>
<style type="text/css教程">
a { color:#213f71; font-size:9pt; text-decoration:none;}
a:hover {color:#eb8923; }
/* product_img_roll */
.blk_18 {
overflow:hidden;
zoom:1;
font-size:12px;
border:1px solid #e3e3e3;
background:#f3f3f3;
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(/guendongtupian/picr_1_01.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/网页特效">
//========================产品与服务==============================
//图片滚动列表 mengjia 070927
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);comps教程cr_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").onmouseo教程ver=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="/example/guendongtupian/1.jpg" alt="" width="96" height="72"/>图片一</a>
<a class="pl"href="#"> <img src="/example/guendongtupian/2.jpg" alt="" width="96" height="72"/>图片而</a>
<a class="pl" href="#"><img src="/example/guendongtupian/3.jpg" alt=""width="96" height="72"/>图片三</a>
<a class="pl" href="#"><img src="/example/guendongtupian/4.jpg" alt="" width="96" height="72"/>图片四</a>
<a class="pl" href="#"><img src="/example/guendongtupian/5.jpg" alt="" width="96" height="72"/>图片五</a>
<a class="pl" href="#"><img src="/example/guendongtupian/6.jpg" alt="" width="96" height="72"/>图片六</a>
<a class="pl" href="#"><img src="/example/guendongtupian/7.jpg" alt="" width="96" height="72"/>图片七</a>
<a class="pl" href="#" ><img src="/example/guendongtupian/8.jpg" alt="" width="96" height="72"/>图片八</a>
<a class="pl" href="#" ><img src="/example/guendongtupian/9.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>
