常用JS图片滚动代码大全
2024-06-01 21:53:44
原文地址：http://www.codefans.net/jscss/code/1801.shtml
本源代码收集了一些常用的网页图片滚动，无缝滚动，效果很平滑，包括上下左右四个方向的滚动，或许你现在用不上这些代码，不过先收藏起来以备后用哦。
<!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>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- www.codefans.net</title>
</head>
<body>
<div id="colee" style="overflow:hidden;height:253px;width:410px;">
<div id="colee1">
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.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.οnmοuseοver=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.οnmοuseοut=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.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.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.οnmοuseοver=function() {clearInterval(MyMar2)}
colee_bottom.οnmοuseοut=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.codefans.net/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.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.οnmοuseοver=function() {clearInterval(MyMar3)}
colee_left.οnmοuseοut=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.codefans.net/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="http://www.codefans.net/jscss/demoimg/200907/bg3.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.οnmοuseοver=function() {clearInterval(MyMar4)}
colee_right.οnmοuseοut=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<!--向右滚动代码结束-->
</body>
</html>常用JS图片滚动代码大全相关推荐
- 常用JS图片滚动（无缝、平滑、上下左右滚动）
常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head> <-----> </head> <body> <!--向下滚动代码开始--&g ...
- 简洁的JS图片滚动代码
非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止. 它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的有用. <!DOCT ...
- 常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全
今天刚网上看的 不多说直接帖代码---- <head> <-----> </head> <body> <!--向下滚动代码开始--> < ...
- JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...
- 一款JS+CSS实现的无缝平滑图片滚动代码
代码简介: 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. 代码内容 ...
- 10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码（三）
jquery banner滑块导航条幻灯片轮播图片滚动 jQuery blockSlide插件熔岩灯标签导航banner焦点图片切换 jquery图片冒泡插件鼠标悬停图片冒泡动画展示 jquery h ...
- php图片左右滚动代码怎么写,css图片滚动代码怎么写？轮播图横向滚动展示
在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...
- js图片滚动无缝衔接
js图片滚动无缝衔接 <style>*{margin:0;padding:0;}div{width:600px;height:200px;position:relative;border: ...
- html背景图片随鼠标滚动条,博客音效代码、滚动条代码、单张图片滚动代码、背景图片代码、个性鼠标(2)...
[99补]隐形博客音效代码 一句代码直接插入,比你从任何地方看到的都要简单: dynsrc=http://www.smartclub.com.cn/smart_sms/music/male/hktk. ...
最新文章
- [云炬创业基础笔记]第十一章创业计划书测试9
- 【Programming Clip】06、07年清华计算机考研上机试题解答（个别测试用例无法通过）...
- 理解并从头搭建redis集群
- sqoop hive导出到mysql_Sqoop hive导出到mysql[转]
- 泰山行宫碧霞元君祠_临清市泰山行宫碧霞元君祠5月4号（农历三月三十日）举行大型泰山奶奶接驾法会...
- 原生JS实现Canvas时钟
- SourceTree与git及AndroidStudio的联合使用详解（Windows系统）
- java版本-API接口测试框架搭建
- 投资数据中心所考虑的重要因素
- python 抓取微博评论破亿_如果利用Python分析14亿条数据！资深程序员手把手教你！过亿级！...
- iOS实现一个颜色渐变的弧形进度条
- SharePoint 2010 添加“我的链接”菜单
- Vue.js常用开发知识简要入门（二）
- java文件复制后是乱码_复制Java源文件到MyEclipse后乱码问题怎么解决？
- 分享一个免费开源的视频录制软件(OBS)
- 骁龙神经处理引擎（Snapdragon Neural Processing Engine）
- 利用Github快速搭建个人博客总结(亲测)
- 在 boot 操作过程中的 FIRST_BOOT阶段，安装失败，出现错误
- 股权转让是什么？如何股权转让？
- 阿里云云计算高级工程师ACP认证（Alibaba Cloud Certified Professional - Cloud Computing）考试大纲