设为首页
|
加入收藏
您好，欢迎来到点滴吧！
手机版
www.diandiba.com
记录点点滴滴，尽在点滴吧
文章
文章
特效
素材
景点
首页
手机
建站
源码
服务器
生活
常识
健康
美食
美容
旅游
景点
攻略
游记
特产
知识
笑话
名句
散文
故事
编程
ASP
PHP
.NET
SQL
软件
Office
QQ
Photoshop
特效
幻灯片
图片相册
播放器
素材
图片
PSD素材
网页模板
您现在的位置：
首页
>
图片相册
> 特效详情
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全
更新时间：2015/1/24 21:54:47 下载：3365次
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全</title> </head> <body> <div id="colee" style="overflow:hidden;height:253px;width:410px;"> <div id="colee1"> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> </div> <div id="colee2"></div> </div> <script> var speed=30; var colee2=document.getElementById("colee2"); var colee1=document.getElementById("colee1"); var colee=document.getElementById("colee"); colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2 function Marquee1(){ //当滚动至colee1与colee2交界时 if(colee2.offsetTop-colee.scrollTop<=0){ colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端 }else{ colee.scrollTop++ } } var MyMar1=setInterval(Marquee1,speed)//设置定时器 //鼠标移上时清除定时器达到滚动停止的目的 colee.onmouseover=function() {clearInterval(MyMar1)} //鼠标移开时重设定时器 colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)} </script> <!--向上滚动代码结束--> <br> <!--下面是向下滚动代码--> <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"> <div id="colee_bottom1"> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> <p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p> </div> <div id="colee_bottom2"></div> </div> <script> var speed=30 var colee_bottom2=document.getElementById("colee_bottom2"); var colee_bottom1=document.getElementById("colee_bottom1"); var colee_bottom=document.getElementById("colee_bottom"); colee_bottom2.innerHTML=colee_bottom1.innerHTML colee_bottom.scrollTop=colee_bottom.scrollHeight function Marquee2(){ if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0) colee_bottom.scrollTop+=colee_bottom2.offsetHeight else{ colee_bottom.scrollTop-- } } var MyMar2=setInterval(Marquee2,speed) colee_bottom.onmouseover=function() {clearInterval(MyMar2)} colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)} </script> <!--向下滚动代码结束--> <br> <!--下面是向左滚动代码--> <div id="colee_left" style="overflow:hidden;width:500px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="colee_left1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p></td> <td><p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p></td> <td><p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p></td> <td><p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p></td> <td><p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p></td> <td><p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p></td> <td><p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p></td> </tr> </table> </td> <td id="colee_left2" valign="top"></td> </tr> </table> </div> <script> //使用div时，请保证colee_left2与colee_left1是在同一行上. var speed=30//速度数值越大速度越慢 var colee_left2=document.getElementById("colee_left2"); var colee_left1=document.getElementById("colee_left1"); var colee_left=document.getElementById("colee_left"); colee_left2.innerHTML=colee_left1.innerHTML function Marquee3(){ if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度 else{ colee_left.scrollLeft++ } } var MyMar3=setInterval(Marquee3,speed) colee_left.onmouseover=function() {clearInterval(MyMar3)} colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} </script> <!--向左滚动代码结束--> <br> <!--下面是向右滚动代码--> <div id="colee_right" style="overflow:hidden;width:500px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="colee_right1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p></td> <td><p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p></td> <td><p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p></td> <td><p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p></td> <td><p><img src="http://www.diandiba.com/Upload/14217362159414671.jpg"></p></td> </tr> </table> </td> <td id="colee_right2" valign="top"></td> </tr> </table> </div> <script> var speed=30//速度数值越大速度越慢 var colee_right2=document.getElementById("colee_right2"); var colee_right1=document.getElementById("colee_right1"); var colee_right=document.getElementById("colee_right"); colee_right2.innerHTML=colee_right1.innerHTML function Marquee4(){ if(colee_right.scrollLeft<=0) colee_right.scrollLeft+=colee_right2.offsetWidth else{ colee_right.scrollLeft-- } } var MyMar4=setInterval(Marquee4,speed) colee_right.onmouseover=function() {clearInterval(MyMar4)} colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)} </script> <!--向右滚动代码结束--> </body> </html>
预览效果
复制代码
保存代码
提示：可以先修改部分代码后再运行
本源代码收集了一些常用的网页图片滚动，无缝滚动，效果很平滑，包括上下左右四个方向的滚动，或许你现在用不上这些代码，不过先收藏起来以备后用哦。
上一个素材：
JavaScript图片放大技术（放大镜）示例代码
下一个素材：
不间断向上滚动的图片
相关特效
jquery hover图片遮罩层滑
jquery结婚电子请柬特效素
jquery鼠标点击图片翻开切
文字置于图片之上且背景半
导航分类
热门文章
1
jquery结婚电子请柬特效素材
2
jquery hover图片遮罩层滑动
3
文字置于图片之上且背景半透明
4
常用JS图片滚动（无缝、平滑、
5
jqzoom图片放大器代码
6
常用图片向左滚动代码
7
jquery鼠标点击图片翻开切换效
8
带左右箭头的横向图片滚动代码
9
让图片按指定高度向上滚动
10
不间断向上滚动的图片
关于我们
|
联系我们
|
免责声明
|
网站地图
|
CopyRight 2012-2015 www.diandiba.com - 点滴吧 All Rights Reserved
滇ICP备09005765号-2
www.diandiba.comwww.diandiba.com
