<!DOCTYPE html >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

.piczhanshi{width:976px;height:167px;border:1px #999999 solid;margin:0 auto;}

h3{

float:left;

background-color: #DDD;

float: left;

height: 35px;

width: 966px;

margin-top: 2px;

line-height: 35px;

text-align: center;

color: #064278;

font-size: 18px;

margin-left: 5px;

margin-right: 5px;

margin-bottom: 10px;

}

.tupian{

float:left;

width:966px;

height:120px;

margin-left:5px;margin-right:5px;

}

.demo{width:966px;height:110px;overflow:hidden;margin-top:5px;margin-bottom:5px;} //这个是scrollLeft作用的层，实现移动效果的是他的子级divindexmo

#indemo{width:800%;height:110px;} //这里的宽度为他的父级div层的8倍宽

.demo1,.demo2{float:left;}

</style>

</head>





<body>

<div id="piczhanshi" class="piczhanshi">

<h3>鸟巢效果图</h3>

<div id="tupian" class="tupian">//这里是包括图片的最外层div是为了定位而设置的与滚动没关系

<div id="demo" class="demo">   // 这里是包括图片的div，也就是须要实现子级div滚动的层（scrollLeft是相对于当前层的子层的），这里必须这是好宽高已经overflow：hidden

<div id="indemo">  //这个是须要滚动的图片包括层，他的宽度在图片左右滚动效果下，比他的父级div的宽大，这里设置为800%，也就是相当他的父级div来说，他等于父级div宽的8倍

<div id="demo1" class="demo1">//这里是包括图片的层，通过“float”和demo2实现无缝连接

<img src="image/niaochao1.jpg" />

<img src="image/niaochao2.jpg" />

<img src="image/niaochao3.jpg" />

<img src="image/niaochao4.jpg" />

<img src="image/niaochao5.jpg" />

<img src="image/niaochao6.jpg" />

<img src="image/niaochao7.jpg" />

<img src="image/niaochao8.jpg" />

<img src="image/niaochao9.jpg" />



</div>

<div id="demo2" class="demo2"></div>//这里通过js代码“ tab2.innerHTML=tab1.innerHTML;”得到demo1的值，通过“float”和demo1实现无缝连接

</div>

</div>

</div>

</div>

<script language="javascript">

 var speed=20;

 var tab=document.getElementById("demo");

 var tab1=document.getElementById("demo1");

 var tab2=document.getElementById("demo2");

 tab2.innerHTML=tab1.innerHTML; //通过赋值获得tab1的值

 function marquee(){

 if(tab2.offsetWidth-tab.scrollLeft<=0)//当tab的移动宽度大于等于demo1的时候，scrollLeft为0，也就是恢复到未移动前的情况，继续移动

 {tab.scrollLeft=0}

 else

 {tab.scrollLeft++;} //图片层不断的往left移动

 }

 var timer=setInterval(marquee,speed); //定时器

 tab.onmouseover=function(){clearInterval(timer)};//鼠标经过容器的时候清除定时器

 tab.onmouseout=function(){timer=setInterval(marquee,speed);}//鼠标移开容器的时候開始定时器

</script>

</body>

</html>

*******************2004-04-26，优化后，点击左右的图片就清除自己主动滚动的定时器，实现点击的时候能够滚动对应的像素************************

<!DOCTYPE html >

<html >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

.main{width:980px;height:190px;border:1px #999999 solid;margin:0 auto;}

h3{width:980px;height:30px;text-align:center;color:#3399FF;float:left;}

.tupian{width:980px;height:139px;float:left;position:relative;}

.indemo{width:800%;height:139px;}

.demo{width:948px;height:160px;float:left;overflow:hidden;}

.demo1{float:left;}

.demo2{float:left;}

.right{height:89px;width:16px;left:0;margin-top:40px;float:left;}

.left{height:89px;width:16px;margin-top:40px;float:left;}

</style>

</head>

<body>

<div id="main" class="main">

<h3>鸟巢展示图</h3>

<div id="tupian" class="tupian">

<div class="left"><img src="images/but_l2.jpg" class="lt" id="lt" /></div>

<div id="demo" class="demo">

<div id="indemo" class="indemo">

<div id="demo1" class="demo1">

<img src="images/niaochao1.jpg" />

<img src="images/niaochao2.jpg" />

<img src="images/niaochao3.jpg" />

<img src="images/niaochao4.jpg" />

<img src="images/niaochao5.jpg" />

<img src="images/niaochao6.jpg" />

<img src="images/niaochao7.jpg" />

<img src="images/niaochao8.jpg" />

<img src="images/niaochao9.jpg" />

</div>

<div id="demo2" class="demo2"></div>

</div>

</div>

<div class="right"><img src="images/but_r2.jpg" class="rt" id="rt" /></div>

</div>

</div>

<script type="text/javascript">

var speed=20;

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

var lt=document.getElementById("lt");

var rt=document.getElementById("rt");

tab2.innerHTML=tab1.innerHTML;

function marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

{tab.scrollLeft=0}

else

{tab.scrollLeft++;}

}

var timer=setInterval(marquee,speed);

tab.onmouseover=function(){clearInterval(timer)};

tab.onmouseout=function(){timer=setInterval(marquee,speed)}

rt.onmouseout=function(){timer=setInterval(marquee,speed)};
//由于设置了点击图标的的时候清除定时器，所以这里必须在移开鼠标的时候開始定时器

lt.onmouseout=function(){timer=setInterval(marquee,speed)};

lt.onclick=function(){      //点击左图标时候执行

clearInterval(timer);   //清除定时器

if(tab.scrollLeft>=1440){tab.scrollLeft=0;}  //当层往左移动的像素大于1440的时候，scrillLeft返回0

else{tab.scrollLeft+=160} //不断的往左滚

}





rt.onclick=function(){ //点击右边鼠标的时候

clearInterval(timer);//清除定时器

if(tab.scrollLeft==0){tab.scrollLeft=1440;} //scroll为0的时候（这里必须注意，if里面是用“==”，是对照的意思，{}里面的“=”是赋值的意思，不能弄混），scrollLeft返回0

else if(tab.scrollLeft<=-1440){tab.scrollLeft=0;}//当scrollLeft少于1440的时候，scrollLeft返回0，同一时候）if（）{}         else{}之间是不存在不论什么标记符号的，这是格式

else{tab.scrollLeft-=160;}

}

</script>

</body>

</html>

javascript实现图片无缝滚动（scrollLeft的使用方法介绍）的更多相关文章

  1. Javascript实现图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  3. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  4. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  8. 原生javascript效果：无缝滚动

    <style type="text/css"> #con {width:400px; padding:10px; margin:20px auto; text-alig ...

  9. Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...

随机推荐

  1. Struct初学的，页面跳转

    Filter控制器 jsp页面代码 <form action="page_login.action" method="post">     user ...

  2. C++中rand（）函数的用法

    C++中rand()函数的用法   2011-12-30 11:03:59|  分类: C / C++|举报|字号 订阅 一.C++中不能使用random()函数 random函数不是ANSI C标准 ...

  3. [转]Permission denied: /.htaccess pcfg_openfile: unable to check htaccess file, ensure it is readable

    原文链接:http://blog.csdn.net/dyw/article/details/6612497 近日,在Apache2环境下部署Rails3应用时碰到此错误: Permission den ...

  4. python验证码识别

    关于利用python进行验证码识别的一些想法 用python加“验证码”为关键词在baidu里搜一下,可以找到很多关于验证码识别的文章.我大体看了一下,主要方法有几类:一类是通过对图片进行处 理,然后 ...

  5. HTML——左右側边栏布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. Outlook Express 收发邮件出现&quot;0x800CCC0F&quot;错误代码解决方法

    非常多网友在使用Outlook Express收发邮件的过程中,有时能够发送邮件,但出现不能接收信件的问题.每次在收邮件都会在某个地方停止不动,然后报超时,出现错误代码0x800CCC19或0x800 ...

  7. android获取View上某点的颜色

    //根据坐标获取 ImageView imageView = ((ImageView)v); Bitmap bitmap = ((BitmapDrawable)imageView.getDrawabl ...

  8. Android 应用程序签名

    本文主要介绍Android应用程序签名的相关理论知识以及怎样公布Android应用程序. 1.签名的概念 为大家所熟知的日常生活中的签名,它是代表某个人的特殊标记,用于唯一标识某个人.而Android ...

  9. MSSQL - SqlDataReader

    DataReader对象: ·DataReader对象是一个读取行的只读流的方式,绑定数据时比使用数据集方式性能要高,因为他是只读的,所以如果要对数据库中的数据进行修改就需要借助 将所做的修改保存到数 ...

  10. C++ Primer学习笔记2--c++标准库中的 vector、string 和 bitset 类型

    一.string    #include <string>  using std::string    初始化函数:    string s1;        默认构造函数 s1 为空串 ...