常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全

最新推荐文章于 2024-06-25 11:18:39 发布
最新推荐文章于 2024-06-25 11:18:39 发布
阅读量698 收藏
点赞数
分类专栏： html 文章标签： html 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>向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)- www.codefans.net</title>
</head>
<body>
<div id="colee" style="overflow:hidden;height:253px;width:410px;">
<div id="colee1">
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/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="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/jscss/demoimg/200907/bg3.jpg"></p>
<p><img src="/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="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/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="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/jscss/demoimg/200907/bg3.jpg"></p></td>
<td><p><img src="/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>


xlhu618
关注
专栏目录
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)
10-20
JavaScript图片滚动是一种常见的网页动态效果，它可以为用户提供更生动、吸引人的浏览体验。本文将详细介绍如何使用JavaScript实现图片的无缝、平滑、上下左右滚动效果。 首先，我们要明白JavaScript图片滚动的基本...
图片无缝滚动插件上下左右图片无缝滚动代码.zip
07-11
这个压缩包文件"图片无缝滚动插件上下左右图片无缝滚动代码.zip"显然包含了一套实现这种效果的JavaScript代码。以下是关于这个插件及其相关技术的知识点详解： 1. **JavaScript基础**：无缝滚动效果主要依赖...
js实现图片滚动
学习的约束力，提醒自己
03-23 3163
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">向上下左右不间断无缝滚动图片的效果(兼容火狐和IE) 源码爱好者收集 codefans.netvar speed=30;var colee2=document.getElementById("colee2");var cole
这个挺酷：原生JS代码实现：lightbox.+图片滚动（下：图片滚动部分）
最新发布
uu0216的博客
06-25 514
我介绍了如何使用原生JavaScript+CSS实现了lightbox的基本功能。但我们这个图片组列表因为是数量可变的，所以，这样一下子都列出来是不行的。我们需要给外面的容器增加宽度和高度的限制，让溢出的图片，可以实现点击左右按钮滚动，这样才不会打乱页面的布局。这样我们就把滚动和lightbox两个部分都实现了。那么现在，就让我来介绍一下，我是怎么实现的。TIPs：本组滚动左右按钮是用css写的，没有使用图片，可以放心拿走。
js 图片滚动代码。
erfeiffff的博客
03-23 364
html 布局结构 <table width="2200px" id="demoTable" border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 > <tr> <td valign=top id=marquePic1> <table width='1...
滚动图片JS代码
weixin_30773135的博客
02-21 101
借鉴了博客园上 http://www.cnblogs.com/blueSkys/archive/2010/03/15/1686476.html 该博主的滚动图片代码。 修改了一个div版本了，向左滚动图片代码： <html><head><title></title></head><body><!--下面是向左滚动...
JS滚动图片代码（含横向和纵向）
咖皮球文摘
12-16 1147
 横向onmouseout="doscroll()">图片URL" height=20 width=104 border=0>图片URL" height=20 width=104 border=0>var t=demo.scrollWidthdemo1.innerHTML+=demo1.innerHTMLfunction doMarquee(){demo.scrollLeft=
jquery上下左右图片无缝滚动代码
04-07
"jquery上下左右图片无缝滚动代码"是一个基于jQuery的插件，主要用于创建图片滚动展示的效果，尤其适用于产品展示或者新闻更新等场景。 这个插件允许图片在页面上实现上下或左右的平滑滚动，给用户带来连续、无断裂...
JS图片无缝、平滑滚动代码
10-26
本文将介绍如何使用JavaScript（简称JS）来实现图片的无缝且平滑滚动效果。通过这段介绍，我们可以了解图片无缝滚动的实现原理，并掌握相关的技术细节。 首先，JS图片无缝滚动的实现依赖于对滚动位置的精确控制。...
常用JS图片滚动（无缝、平滑、上下左右滚动）代码
11-30
### 常用JS图片滚动（无缝、平滑、上下左右滚动）代码解析 #### 一、概述 本文档提供了一段实现图片无缝滚动的JavaScript代码。该代码能够实现图片在网页上的平滑滚动，包括上下两个方向。这段代码不仅适用于创建...
图片滚动js代码
loongwong2011的博客
07-15 384
轮播图实现效果见下图，图片能自己轮播，点击左右按钮进行翻页轮播，鼠标悬停图片或者标题上，停止轮播； 效果图为： 复制代码代码如下: 带左右箭头图片轮播 .rollBox{width:770px;height:260px;overflow:hidden;padding:10px;margin:0 auto;border:1px soli
简洁的JS图片滚动代码
风达的专栏
10-05 3210
非常平滑的JS图片滚动特效代码，无缝循环，速度可自定义，鼠标悬停时停止。 它的特点是JS和图片地址分离，这样做你就经易的从数据库动态调用每张图片的地址，方便控制，因此它非常的有用。 图片滚动 <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #d
【前端】实现图片无缝滚动·教程
qq_45677671的博客
02-04 760
文章目录效果图：需求分析：源代码：所用图片： 效果图： 需求分析： 实现无缝滚动 源代码： HTML部分 <div id="box"> <ul id="u"> <li><img src="a.jpg" alt="" /></li> <li><img src="b.jpg" alt="" /></li> <li><img src="c.jpg" alt="" />&l
JS经典案例-无缝滚动轮播图（纯JS）
Allen-
11-05 6117
JS无缝滚动轮播图案例
【图片轮播】Vue如何实现移动端图片轮播效果，支持左右滑动（附图文及代码）
赏樱看雪撸代码
06-15 9463
vue实现移动端图片轮播，移动端相册制作，vant3实现图片轮播效果，swipe轮播实现过程，swipe轮播组件实现照片轮播，vant3中swipe轮播组件应用。
图片滑动代码
小麦先生
08-03 2599
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 #picBox_top{width:950px; height:
实现JS图片无缝平滑滚动效果的代码示例
本文档主要介绍了如何使用JavaScript实现图片的无缝平滑滚动效果。在HTML5中，作者使用了<!DOCTYPE html>声明和XHTML1.0 Transitional文档类型，确保页面兼容性和结构清晰。页面结构由一个包含图片的滚动容器`#roll`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值