由于自己的需要搜集的一些关于 “ javascript实现图片的不间断连续滚动” 的代码
2009-05-27 20:34
981 查看
js实现图片滚动
关键字: js实现图片滚动
Js代码
1.<link rel="stylesheet" href="../css/picscroll2.css" media="screen"
type="text/css">
2.<script src="../js/yahoo.js" type="text/javascript"></script>
3.<script src="../js/event.js" type="text/javascript"></script>
4.<script src="../js/dom.js" type="text/javascript"></script>
5.<script src="../js/animation.js" type="text/javascript"></script>
6.
7.<script type="text/javascript">
8.
9. YAHOO.example = function() {
10. var $D = YAHOO.util.Dom;
11. var $E = YAHOO.util.Event;
12. var $A = YAHOO.util.Anim;
13. var $M = YAHOO.util.Motion;
14. var $DD = YAHOO.util.DD;
15. var $ = $D.get;
16. var x = 1;
17. return {
18. init : function() {
19. $E.on(['move-left','move-right'], 'click', this.move);
20. },
21. move : function(e) {
22. $E.stopEvent(e);
23. switch(this.id) {
24. case 'move-left':
25. if ( x === 1 ) {
26. return;
27. }
28. var attributes = {
29. points : {
30. by : [101, 0]
31. }
32. };
33. x--;
34. break;
35. case 'move-right':
36. if ( x === 18 ) {
37. return;
38. }
39. var attributes = {
40. points : {
41. by : [-101, 0]
42. }
43. };
44. x++;
45. break;
46. };
47. var anim = new $M('themes', attributes, 0.5,
YAHOO.util.Easing.easeOut);
48. anim.animate();
49. }
50. };
51. }();
52. YAHOO.util.Event.onAvailable('doc',YAHOO.example.init, YAHOO.example,
true);
53.
54. </script>
55.<style>
56.
57..divhighlightit img{
58.border: 1px solid #ffffff;
59.}
60.
61..highlightit:hover img{
62.border: 2px solid red;
63.}
64.
65..divhighlightit {
66.border: 2px solid #B5BDC6;
67.}
68.
69.
70.</style>
71.<div id="doc" style="clear: both;">
72. <div id="info">
73. <a id="move-left" href="#" ><img src="../images/left.jpg"
border="0" height="70"></a>
74. <div class="mod">
75. <ul style="position: relative; left: 0px; top: 2px;"
id="themes">
76. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
77. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
78. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
79. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
80. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
81. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
82. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
83. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
84. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
85. </ul>
86. </div>
87. <a id="move-right" href="#"><img src="../images/right.jpg"
border="0" height="70"></a>
88. </div>
89.</div>
<link rel="stylesheet" href="../css/picscroll2.css" media="screen"
type="text/css">
<script src="../js/yahoo.js" type="text/javascript"></script>
<script src="../js/event.js" type="text/javascript"></script>
<script src="../js/dom.js" type="text/javascript"></script>
<script src="../js/animation.js" type="text/javascript"></script>
<script type="text/javascript">
YAHOO.example = function() {
var $D = YAHOO.util.Dom;
var $E = YAHOO.util.Event;
var $A = YAHOO.util.Anim;
var $M = YAHOO.util.Motion;
var $DD = YAHOO.util.DD;
var $ = $D.get;
var x = 1;
return {
init : function() {
$E.on(['move-left','move-right'], 'click',
this.move);
},
move : function(e) {
$E.stopEvent(e);
switch(this.id) {
case 'move-left':
if ( x === 1 ) {
return;
}
var attributes = {
points : {
by : [101, 0]
}
};
x--;
break;
case 'move-right':
if ( x === 18 ) {
return;
}
var attributes = {
points : {
by : [-101, 0]
}
};
x++;
break;
};
var anim = new $M('themes', attributes, 0.5,
YAHOO.util.Easing.easeOut);
anim.animate();
}
};
}();
YAHOO.util.Event.onAvailable('doc',YAHOO.example.init, YAHOO.example,
true);
</script>
<style>
.divhighlightit img{
border: 1px solid #ffffff;
}
.highlightit:hover img{
border: 2px solid red;
}
.divhighlightit {
border: 2px solid #B5BDC6;
}
</style>
<div id="doc" style="clear: both;">
<div id="info">
<a id="move-left" href="#" ><img src="../images/left.jpg"
border="0" height="70"></a>
<div class="mod">
<ul style="position: relative; left: 0px; top: 2px;"
id="themes">
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
</ul>
</div>
<a id="move-right" href="#"><img src="../images/right.jpg"
border="0" height="70"></a>
</div>
</div>
Css代码
1.
2.#vecherthemes {
3. WIDTH: 4000px
4.}
5.
6.#vecherthemes {
7. FLOAT: left;
8. PADDING-RIGHT: 0px;
9. PADDING-LEFT: 0px;
10. PADDING-BOTTOM: 0px;
11. MARGIN: 0px;
12. OVERFLOW: hidden;
13. PADDING-TOP: 0px
14.}
15.
16.#vecherthemes LI {
17. PADDING-RIGHT: 0px;
18. PADDING-LEFT: 0px;
19. PADDING-BOTTOM: 0px;
20. MARGIN: 0px;
21. OVERFLOW: hidden;
22. PADDING-TOP: 0px
23.}
24.
25.#vecherthemes LI {
26. PADDING-RIGHT: 0px;
27. PADDING-LEFT: 0px;
28. FLOAT: left;
29. PADDING-BOTTOM: 0px;
30. MARGIN: 0px 0px 0px 0px;
31. WIDTH: 79px;
32. PADDING-TOP: 0px;
33. HEIGHT: 80px
34.}
35.
36.#themes LI {
37. PADDING-RIGHT: 0px;
38. PADDING-LEFT: 0px;
39. PADDING-BOTTOM: 0px;
40. MARGIN: 0px;
41. OVERFLOW: hidden;
42. PADDING-TOP: 0px
43.}
44.
45.#themes LI {
46. PADDING-RIGHT: 0px;
47. PADDING-LEFT: 0px;
48. FLOAT: left;
49. PADDING-BOTTOM: 0px;
50. MARGIN: 0px 0px 0px 0px;
51. WIDTH: 100px;
52. PADDING-TOP: 0px;
53. HEIGHT: 80px
54.}
55.
56.LI IMG {
57. BORDER-RIGHT: #eee 1px solid;
58. BORDER-TOP: #eee 1px solid;
59. BORDER-LEFT: #eee 1px solid;
60. BORDER-BOTTOM: #eee 1px solid
61.}
62.
63..highlightit img {
64. border: 1px solid #ffffff;
65.}
66.
67..divhighlightit {
68. border: 2px solid #B5BDC6;
69.}
70.
71..highlightit:hover img {
72. border: 2px solid red;
73.}
74.
75.#vecherdoc {
76. height: 101px;
77. width: 433px;
78. background-repeat: repeat-x
79.}
80.
81.#vecherinfo {
82. PADDING-BOTTOM: 5px;
83. margin-left: 1px;
84. MARGIN: 0px auto;
85. OVERFLOW: hidden;
86. WIDTH: 433px;
87. POSITION: relative;
88.}
89.
90.#vecherinfo A {
91. DISPLAY: block;
92. Z-INDEX: 100;
93. BACKGROUND: #fff;
94. COLOR: #333;
95. POSITION: absolute;
96. TOP: 10px;
97. TEXT-DECORATION: none
98.}
99.
100.#vecherinfo A#nev-move-left {
101. LEFT: -2px
102.}
103.
104.#vecherinfo A#nev-move-right {
105. RIGHT: 5px
106.}
107.
108.#vecherinfo .vechermod {
109. OVERFLOW: hidden
110.}
111.
112..vechermod {
113. Text-Align: left;
114. MARGIN: 0px auto;
115. OVERFLOW: hidden;
116. WIDTH: 390px;
117. ZOOM: 1;
118. POSITION: relative;
119. margin-left: 18px;
120.}
以前我们站点也介绍过连续滚动的图片，但缺陷是有间断。如何制作连续不间断的播放滚动呢？
请参看制作方法：
先制作向上滚动的效果：
插入代码：
<!-- 指向链接图片url -->
<base href="http://www.it365cn.com">
<div id=demo
style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<!-- 定义图片 -->
<img src=http://www.blue1000.com/article/"images/LOGO_1.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/Flashempire.gif">
<img src=http://www.blue1000.com/article/"images/LOGO.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/5dmedia.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/macromedia.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/sucaiw.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/blueieda.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/HTMLcn.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/fwcn.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
制作向下滚动的效果：
将上面“制作向上滚动的效果”中的红色字体Js部分替换成：
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
制作向左滚动的效果：
<base href="http://www.it365cn.com">
<div id=demo
style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><img
src=http://www.blue1000.com/article/"images/LOGO_1.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/Flashempire.gif"><img
src=http://www.blue1000.com/article/"images/LOGO.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/5dmedia.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/macromedia.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/sucaiw.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/blueieda.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/HTMLcn.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/fwcn.gif">
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
制作向右滚动的效果：
将上面“制作向左滚动的效果”中的红色字体Js部分替换成：
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
制作的方法就简单的介绍完成了。
javascript实现图片的不间断连续滚动
------------------------------------------------------------------------------
--
好喜爱学习网 HaoXiAi.Net 分类：网站制作 脚本语言 来源：网络收集 录入：管理员
------------------------------------------------------------------------------
--
•用javascript实现上下文字滚动特效•文字左右滚动的走马灯效果是一种非常容易实现的特效
，同样的，文字上下滚
•javascript面向对象技术实现树形控件•树形控件是一种人们熟悉的用户界面控件，广泛地用
来显示层次型数据。树形
•网页里嵌入javascript 验证空，汉字，字母，数字长度输入•首先,验证那个表
单:<formaction="orgInser
•用javascript操作word文档•1、向word中写入内容首先在word中设置书签，如书签名为book
制作的代码不给大家加注释了！代码中的图片大家都可以自己加上自己的超级连接，修改的
方法为：<a href="连接的地址" target=_blank><img src="替换
webdesign.chinaitlab.com/img/link.gif" width=图片宽度 height=图片高度
border="0"></a>
先制作向上滚动的效果：
<!-- 指向链接图片url -->
<base href="替换www.webjx.com">
<div id=demo
style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<!-- 定义图片 -->
<img src="替换webdesign.chinaitlab.com/img/link.gif">
<img src="替换webdesign.chinaitlab.com/img/link1.gif">
<img src="替换webdesign.chinaitlab.com/img/link2.gif">
<img src="替换webdesign.chinaitlab.com/img/link3.gif">
<img src="替换webdesign.chinaitlab.com/img/link4.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
制作向下滚动的效果：
将上面“制作向上滚动的效果”中的红色字体Js部分替换成：
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
制作向左滚动的效果：
<base href="替换www.webjx.com">
<div id=demo
style=overflow:hidden;height:33;width:200;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><img src="替换
webdesign.chinaitlab.com/img/link.gif"><img src="替换
webdesign.chinaitlab.com/img/link1.gif"><img src="替换
webdesign.chinaitlab.com/img/link2.gif"><img src="替换
webdesign.chinaitlab.com/img/link3.gif">
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script> 制作向右滚动的效果： 将上面“制作向左滚动的效果”中的红色字体Js
部分替换成： <script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
有什么问题请到中发表
<!-- http://www.okajax.com/ -->
<!-- bbs http://www.okajax.com/bbs-->
<!-- 把下列代码加到<body>区域内 -->
<base href="http://www.okajax.com">
<div id=demo
style=overflow:hidden;height:33;width:200;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><img src="/upimg/080623/121422243GP19458.gif"
onclick="javascript:window.open(this.src);" style="CURSOR: pointer"
onload="return imgzoom(this,550)"><img src="/upimg/080620/1213a555332019E0.gif"
onclick="javascript:window.open(this.src);" style="CURSOR: pointer"
onload="return imgzoom(this,550)"><img src="/upimg/080620/1213a555332019E0.gif"
onclick="javascript:window.open(this.src);" style="CURSOR: pointer"
onload="return imgzoom(this,550)"><img src="/upimg/080620/1213a555332019E0.gif"
onclick="javascript:window.open(this.src);" style="CURSOR: pointer"
onload="return imgzoom(this,550)">
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
关键字: js实现图片滚动
Js代码
1.<link rel="stylesheet" href="../css/picscroll2.css" media="screen"
type="text/css">
2.<script src="../js/yahoo.js" type="text/javascript"></script>
3.<script src="../js/event.js" type="text/javascript"></script>
4.<script src="../js/dom.js" type="text/javascript"></script>
5.<script src="../js/animation.js" type="text/javascript"></script>
6.
7.<script type="text/javascript">
8.
9. YAHOO.example = function() {
10. var $D = YAHOO.util.Dom;
11. var $E = YAHOO.util.Event;
12. var $A = YAHOO.util.Anim;
13. var $M = YAHOO.util.Motion;
14. var $DD = YAHOO.util.DD;
15. var $ = $D.get;
16. var x = 1;
17. return {
18. init : function() {
19. $E.on(['move-left','move-right'], 'click', this.move);
20. },
21. move : function(e) {
22. $E.stopEvent(e);
23. switch(this.id) {
24. case 'move-left':
25. if ( x === 1 ) {
26. return;
27. }
28. var attributes = {
29. points : {
30. by : [101, 0]
31. }
32. };
33. x--;
34. break;
35. case 'move-right':
36. if ( x === 18 ) {
37. return;
38. }
39. var attributes = {
40. points : {
41. by : [-101, 0]
42. }
43. };
44. x++;
45. break;
46. };
47. var anim = new $M('themes', attributes, 0.5,
YAHOO.util.Easing.easeOut);
48. anim.animate();
49. }
50. };
51. }();
52. YAHOO.util.Event.onAvailable('doc',YAHOO.example.init, YAHOO.example,
true);
53.
54. </script>
55.<style>
56.
57..divhighlightit img{
58.border: 1px solid #ffffff;
59.}
60.
61..highlightit:hover img{
62.border: 2px solid red;
63.}
64.
65..divhighlightit {
66.border: 2px solid #B5BDC6;
67.}
68.
69.
70.</style>
71.<div id="doc" style="clear: both;">
72. <div id="info">
73. <a id="move-left" href="#" ><img src="../images/left.jpg"
border="0" height="70"></a>
74. <div class="mod">
75. <ul style="position: relative; left: 0px; top: 2px;"
id="themes">
76. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
77. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
78. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
79. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
80. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
81. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
82. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
83. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
84. <li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
85. </ul>
86. </div>
87. <a id="move-right" href="#"><img src="../images/right.jpg"
border="0" height="70"></a>
88. </div>
89.</div>
<link rel="stylesheet" href="../css/picscroll2.css" media="screen"
type="text/css">
<script src="../js/yahoo.js" type="text/javascript"></script>
<script src="../js/event.js" type="text/javascript"></script>
<script src="../js/dom.js" type="text/javascript"></script>
<script src="../js/animation.js" type="text/javascript"></script>
<script type="text/javascript">
YAHOO.example = function() {
var $D = YAHOO.util.Dom;
var $E = YAHOO.util.Event;
var $A = YAHOO.util.Anim;
var $M = YAHOO.util.Motion;
var $DD = YAHOO.util.DD;
var $ = $D.get;
var x = 1;
return {
init : function() {
$E.on(['move-left','move-right'], 'click',
this.move);
},
move : function(e) {
$E.stopEvent(e);
switch(this.id) {
case 'move-left':
if ( x === 1 ) {
return;
}
var attributes = {
points : {
by : [101, 0]
}
};
x--;
break;
case 'move-right':
if ( x === 18 ) {
return;
}
var attributes = {
points : {
by : [-101, 0]
}
};
x++;
break;
};
var anim = new $M('themes', attributes, 0.5,
YAHOO.util.Easing.easeOut);
anim.animate();
}
};
}();
YAHOO.util.Event.onAvailable('doc',YAHOO.example.init, YAHOO.example,
true);
</script>
<style>
.divhighlightit img{
border: 1px solid #ffffff;
}
.highlightit:hover img{
border: 2px solid red;
}
.divhighlightit {
border: 2px solid #B5BDC6;
}
</style>
<div id="doc" style="clear: both;">
<div id="info">
<a id="move-left" href="#" ><img src="../images/left.jpg"
border="0" height="70"></a>
<div class="mod">
<ul style="position: relative; left: 0px; top: 2px;"
id="themes">
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
<li><a class="highlightit" href="#"><div
class="divhighlightit"><img src="../images/car.jpg" /></div></a></li>
</ul>
</div>
<a id="move-right" href="#"><img src="../images/right.jpg"
border="0" height="70"></a>
</div>
</div>
Css代码
1.
2.#vecherthemes {
3. WIDTH: 4000px
4.}
5.
6.#vecherthemes {
7. FLOAT: left;
8. PADDING-RIGHT: 0px;
9. PADDING-LEFT: 0px;
10. PADDING-BOTTOM: 0px;
11. MARGIN: 0px;
12. OVERFLOW: hidden;
13. PADDING-TOP: 0px
14.}
15.
16.#vecherthemes LI {
17. PADDING-RIGHT: 0px;
18. PADDING-LEFT: 0px;
19. PADDING-BOTTOM: 0px;
20. MARGIN: 0px;
21. OVERFLOW: hidden;
22. PADDING-TOP: 0px
23.}
24.
25.#vecherthemes LI {
26. PADDING-RIGHT: 0px;
27. PADDING-LEFT: 0px;
28. FLOAT: left;
29. PADDING-BOTTOM: 0px;
30. MARGIN: 0px 0px 0px 0px;
31. WIDTH: 79px;
32. PADDING-TOP: 0px;
33. HEIGHT: 80px
34.}
35.
36.#themes LI {
37. PADDING-RIGHT: 0px;
38. PADDING-LEFT: 0px;
39. PADDING-BOTTOM: 0px;
40. MARGIN: 0px;
41. OVERFLOW: hidden;
42. PADDING-TOP: 0px
43.}
44.
45.#themes LI {
46. PADDING-RIGHT: 0px;
47. PADDING-LEFT: 0px;
48. FLOAT: left;
49. PADDING-BOTTOM: 0px;
50. MARGIN: 0px 0px 0px 0px;
51. WIDTH: 100px;
52. PADDING-TOP: 0px;
53. HEIGHT: 80px
54.}
55.
56.LI IMG {
57. BORDER-RIGHT: #eee 1px solid;
58. BORDER-TOP: #eee 1px solid;
59. BORDER-LEFT: #eee 1px solid;
60. BORDER-BOTTOM: #eee 1px solid
61.}
62.
63..highlightit img {
64. border: 1px solid #ffffff;
65.}
66.
67..divhighlightit {
68. border: 2px solid #B5BDC6;
69.}
70.
71..highlightit:hover img {
72. border: 2px solid red;
73.}
74.
75.#vecherdoc {
76. height: 101px;
77. width: 433px;
78. background-repeat: repeat-x
79.}
80.
81.#vecherinfo {
82. PADDING-BOTTOM: 5px;
83. margin-left: 1px;
84. MARGIN: 0px auto;
85. OVERFLOW: hidden;
86. WIDTH: 433px;
87. POSITION: relative;
88.}
89.
90.#vecherinfo A {
91. DISPLAY: block;
92. Z-INDEX: 100;
93. BACKGROUND: #fff;
94. COLOR: #333;
95. POSITION: absolute;
96. TOP: 10px;
97. TEXT-DECORATION: none
98.}
99.
100.#vecherinfo A#nev-move-left {
101. LEFT: -2px
102.}
103.
104.#vecherinfo A#nev-move-right {
105. RIGHT: 5px
106.}
107.
108.#vecherinfo .vechermod {
109. OVERFLOW: hidden
110.}
111.
112..vechermod {
113. Text-Align: left;
114. MARGIN: 0px auto;
115. OVERFLOW: hidden;
116. WIDTH: 390px;
117. ZOOM: 1;
118. POSITION: relative;
119. margin-left: 18px;
120.}
以前我们站点也介绍过连续滚动的图片，但缺陷是有间断。如何制作连续不间断的播放滚动呢？
请参看制作方法：
先制作向上滚动的效果：
插入代码：
<!-- 指向链接图片url -->
<base href="http://www.it365cn.com">
<div id=demo
style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<!-- 定义图片 -->
<img src=http://www.blue1000.com/article/"images/LOGO_1.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/Flashempire.gif">
<img src=http://www.blue1000.com/article/"images/LOGO.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/5dmedia.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/macromedia.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/sucaiw.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/blueieda.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/HTMLcn.gif">
<img src=http://www.blue1000.com/article/"images/LOGO/fwcn.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
制作向下滚动的效果：
将上面“制作向上滚动的效果”中的红色字体Js部分替换成：
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
制作向左滚动的效果：
<base href="http://www.it365cn.com">
<div id=demo
style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><img
src=http://www.blue1000.com/article/"images/LOGO_1.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/Flashempire.gif"><img
src=http://www.blue1000.com/article/"images/LOGO.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/5dmedia.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/macromedia.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/sucaiw.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/blueieda.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/HTMLcn.gif"><img
src=http://www.blue1000.com/article/"images/LOGO/fwcn.gif">
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
制作向右滚动的效果：
将上面“制作向左滚动的效果”中的红色字体Js部分替换成：
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
制作的方法就简单的介绍完成了。
javascript实现图片的不间断连续滚动
------------------------------------------------------------------------------
--
好喜爱学习网 HaoXiAi.Net 分类：网站制作 脚本语言 来源：网络收集 录入：管理员
------------------------------------------------------------------------------
--
•用javascript实现上下文字滚动特效•文字左右滚动的走马灯效果是一种非常容易实现的特效
，同样的，文字上下滚
•javascript面向对象技术实现树形控件•树形控件是一种人们熟悉的用户界面控件，广泛地用
来显示层次型数据。树形
•网页里嵌入javascript 验证空，汉字，字母，数字长度输入•首先,验证那个表
单:<formaction="orgInser
•用javascript操作word文档•1、向word中写入内容首先在word中设置书签，如书签名为book
制作的代码不给大家加注释了！代码中的图片大家都可以自己加上自己的超级连接，修改的
方法为：<a href="连接的地址" target=_blank><img src="替换
webdesign.chinaitlab.com/img/link.gif" width=图片宽度 height=图片高度
border="0"></a>
先制作向上滚动的效果：
<!-- 指向链接图片url -->
<base href="替换www.webjx.com">
<div id=demo
style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<!-- 定义图片 -->
<img src="替换webdesign.chinaitlab.com/img/link.gif">
<img src="替换webdesign.chinaitlab.com/img/link1.gif">
<img src="替换webdesign.chinaitlab.com/img/link2.gif">
<img src="替换webdesign.chinaitlab.com/img/link3.gif">
<img src="替换webdesign.chinaitlab.com/img/link4.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
制作向下滚动的效果：
将上面“制作向上滚动的效果”中的红色字体Js部分替换成：
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
制作向左滚动的效果：
<base href="替换www.webjx.com">
<div id=demo
style=overflow:hidden;height:33;width:200;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><img src="替换
webdesign.chinaitlab.com/img/link.gif"><img src="替换
webdesign.chinaitlab.com/img/link1.gif"><img src="替换
webdesign.chinaitlab.com/img/link2.gif"><img src="替换
webdesign.chinaitlab.com/img/link3.gif">
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script> 制作向右滚动的效果： 将上面“制作向左滚动的效果”中的红色字体Js
部分替换成： <script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
有什么问题请到中发表
<!-- http://www.okajax.com/ -->
<!-- bbs http://www.okajax.com/bbs-->
<!-- 把下列代码加到<body>区域内 -->
<base href="http://www.okajax.com">
<div id=demo
style=overflow:hidden;height:33;width:200;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><img src="/upimg/080623/121422243GP19458.gif"
onclick="javascript:window.open(this.src);" style="CURSOR: pointer"
onload="return imgzoom(this,550)"><img src="/upimg/080620/1213a555332019E0.gif"
onclick="javascript:window.open(this.src);" style="CURSOR: pointer"
onload="return imgzoom(this,550)"><img src="/upimg/080620/1213a555332019E0.gif"
onclick="javascript:window.open(this.src);" style="CURSOR: pointer"
onload="return imgzoom(this,550)"><img src="/upimg/080620/1213a555332019E0.gif"
onclick="javascript:window.open(this.src);" style="CURSOR: pointer"
onload="return imgzoom(this,550)">
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 由于自己的需要搜集的一些关于 “ javascript实现图片的不间断连续滚动” 的代码
- Javascript实现图片不间断滚动的代码
- Javascript实现图片不间断滚动的代码
- JavaScript实现图片的不间断连续滚动
- 网页中实现文字或图片向上不间断滚动的javascript代码
- javascript实现页面图片不间断连续滚动
- JavaScript实现图片的不间断连续滚动
- JavaScript实现图片的不间断连续滚动
- div+css布局的图片连续滚动js实现代码
- 上下左右无空隙不间断图片连续滚动代码
- js实现图片向上连续滚动特效代码(含注释)
- marquee实现连续不间断滚动图片效果
- JS实现图片的不间断连续滚动的简单实例
- 关于代码阅读的编程实现技巧及自己工作学习的一些经验（推荐看后面的后记）
- Javascript实现滚动图片新闻的实例代码
- HTTP POST请求在Volly工厂关于需要鉴权的请求部分代码包含了处理图片实现ImageLoder法
- 上下左右无空隙不间断图片连续滚动代码
- JavaScript不间断连续图片滚动效果
- div+css布局的图片连续滚动js实现代码
- JS实现图片的不间断连续滚动的简单实例