JS无缝图片滚动（上下，左右)

最新推荐文章于 2023-11-07 12:56:57 发布
最新推荐文章于 2023-11-07 12:56:57 发布
阅读量375 收藏
点赞数 1
分类专栏： JS 文章标签： function border div xhtml table html
<!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="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="/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>
vs_hiro
关注
专栏目录
图片无缝滚动插件上下左右图片无缝滚动代码.zip
07-11
这个压缩包文件"图片无缝滚动插件上下左右图片无缝滚动代码.zip"显然包含了一套实现这种效果的JavaScript代码。以下是关于这个插件及其相关技术的知识点详解： 1. **JavaScript基础**：无缝滚动效果主要依赖...
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)
10-20
本文将详细介绍如何使用JavaScript实现图片的无缝、平滑、上下左右滚动效果。 首先，我们要明白JavaScript图片滚动的基本原理。它通常通过创建两个或多个重复的图片容器，并在用户不可见的情况下切换这些容器的位置...
js实现图片滚动
学习的约束力，提醒自己
03-23 3174
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图片滚动（无缝、平滑、上下左右滚动）代码大全
珍惜所有的一切
11-18 2654
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全   innerHTML:    设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft:   设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:    设置或获取位于对象最顶端和窗口中可见内容的最顶端之间
js 图片滚动代码。
erfeiffff的博客
03-23 385
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 110
借鉴了博客园上 http://www.cnblogs.com/blueSkys/archive/2010/03/15/1686476.html 该博主的滚动图片代码。 修改了一个div版本了，向左滚动图片代码： <html><head><title></title></head><body><!--下面是向左滚动...
JS滚动图片代码（含横向和纵向）
咖皮球文摘
12-16 1157
 横向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的插件，主要用于创建图片滚动展示的效果，尤其适用于产品展示或者新闻更新等场景。 这个插件允许图片在页面上实现上下或左右的平滑滚动，给用户带来连续、无断裂...
marquee图片无缝滚动（上下左右均可）
11-17
描述提到"marquee一款非常NB的插件可以实现无缝滚动上下左右都可以。使用简单操作容易"，这表明存在一个名为“marquee”的插件或者扩展，它增强了原始`<marquee>`元素的功能，提供了更丰富的滚动方式，并且用户友好...
js图片滚动插件支持单排图片上下滚动、图片无缝滚动
11-17
本文将深入探讨这种支持单排图片上下滚动和无缝滚动的js图片滚动插件。 首先，单排图片上下滚动是指在网页的一行（或一列）内展示图片，并允许用户通过点击按钮或自动播放来上下滚动这些图片。这种方式使得有限的...
图片滚动js代码
loongwong2011的博客
07-15 391
轮播图实现效果见下图，图片能自己轮播，点击左右按钮进行翻页轮播，鼠标悬停图片或者标题上，停止轮播； 效果图为： 复制代码代码如下: 带左右箭头图片轮播 .rollBox{width:770px;height:260px;overflow:hidden;padding:10px;margin:0 auto;border:1px soli
简洁的JS图片滚动代码
风达的专栏
10-05 3221
非常平滑的JS图片滚动特效代码，无缝循环，速度可自定义，鼠标悬停时停止。 它的特点是JS和图片地址分离，这样做你就经易的从数据库动态调用每张图片的地址，方便控制，因此它非常的有用。 图片滚动 <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #d
【前端】实现图片无缝滚动·教程
qq_45677671的博客
02-04 860
文章目录效果图：需求分析：源代码：所用图片： 效果图： 需求分析： 实现无缝滚动 源代码： 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
【图片轮播】Vue如何实现移动端图片轮播效果，支持左右滑动（附图文及代码）
赏樱看雪撸代码
06-15 9624
vue实现移动端图片轮播，移动端相册制作，vant3实现图片轮播效果，swipe轮播实现过程，swipe轮播组件实现照片轮播，vant3中swipe轮播组件应用。
使用 HTML + CSS + JavaScript 实现无缝滚动轮播图
Allen-
11-05 7128
JavaScript 学习经典案例：使用 HTML + CSS + JavaScript 实现无缝滚动轮播图
web前端js基础------制作滚动图片
最新发布
m0_64148419的博客
11-07 1791
web前端基础使用JS制作一个滚动图片
图片滑动代码
小麦先生
08-03 2610
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 #picBox_top{width:950px; height:
使用JS实现无缝滚动图片效果
JS图片滚动是一种常见的网页动态效果，通过JavaScript实现图片的自动循环滚动，为用户提供更丰富的视觉体验。在这个示例中，我们将探讨如何使用简单的JavaScript代码创建一个向上下左右不间断无缝滚动的图片效果，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值