js控制图片左右滚动

<!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>

时间： 2024-09-30 09:43:40

js控制图片左右滚动的相关文章

可控制图片左右滚动js代码

<!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-

JS控制图片翻转示例代码

 本篇文章主要介绍了JS控制图片翻转示例代码(兼容firefox,ie,chrome) 需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.

JS控制图片等比例缩放的示例代码

 本篇文章主要是对JS控制图片等比例缩放的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: <SCRIPT language="JavaScript"> function DrawImage(ImgD,FitWidth,FitHeight){        var image=new Image();        image.src=ImgD.src;        if(image.width>0 && image.he

谁有按钮控制图片上下滚动的代码

问题描述 谁有按钮控制图片上下滚动的代码 解决方案 解决方案二:问题描述不清楚

js实现图片无缝滚动_javascript技巧

js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 3.offsetWidth:设置或获取指定标签的宽度 4.setInterval():设置方法定时启动 5.clearInterval();清除定时器 效果图: <!DOCTYPE html> <html

js控制图片翻转

<html> <head> <title>js控制图片翻转</title> <script language="网页特效"> <!-- this script works in: navigator 3 - 4, opera 3.1, and explorer 4 if (document.images) { teston = new image(); // active images teston.src = &quo

js控制滚动条缓慢滚动到顶部

<html> <head> <script type="text/javascript"> var currentPosition,timer; function GoTop(){ timer=setInterval("runToTop()",1); } function runToTop(){ currentPosition=document.documentElement.scrollTop || document.body.

js实现图片无缝滚动特效_javascript技巧

首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInterval.首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数.它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInter

marquee和js(javascript)图片无缝滚动方法集绵

下面是我在网上找的一个比较简单的marquee和js相结合解决图片无缝滚动的方法,包括向上.下.左.右四个方向滚动,下面给大家介绍一下: 先了解一下实例代码中用到的对象的几个的属性: 1.innerHTML:设置或获取位于对象起始和结束标签内的 HTML 2.scrollHeight: 获取对象的滚动高度. 3.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 4.scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 5.scroll