js图片(上、下、左、右)无缝滚动代码

最新推荐文章于 2023-11-07 12:56:57 发布
最新推荐文章于 2023-11-07 12:56:57 发布
阅读量638 收藏
点赞数
分类专栏： 技术类

                                                                       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>无标题文档</title>
<style type="text/css">
*{margin:0 auto; padding:0; border:0;}
#demo {
    height:300px;
    width:86px;
    overflow:hidden;
 padding:0 2px;
    background:#FFCCFF;
}
demo1{
    height:300px;
    width:90px;
}
demo1 img{
 width:86px;
 height:56px;
 border:0;
 padding-bottom:10px;
}
</style>
</head>

<body>
<div id="demo">
  <div id="demo1">
   <a href="#"><img src="images/lpxx02.jpg" /></a>
   <a href="#"><img src="images/lpxx02.jpg" /></a>
   <a href="#"><img src="images/lpxx02.jpg" /></a>
   <a href="#"><img src="images/lpxx02.jpg" /></a>
   <a href="#"><img src="images/lpxx02.jpg" /></a>
  </div>
  <div id="demo2"></div>
</div>
<script type="text/javascript">
 var speed=20; //数字越大速度越慢
 var tab=document.getElementById("demo");
 var tab1=document.getElementById("demo1");
 var tab2=document.getElementById("demo2");
 tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
 function Marquee(){
 if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
 tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
 else{
 tab.scrollTop++
 }
 }
 var MyMar=setInterval(Marquee,speed);
 tab.οnmοuseοver=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
 tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
</script>
</body>
</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>无标题文档</title>
<style type="text/css">
*{margin:0 auto; padding:0; border:0;}
#demo {
    height:300px;
    width:86px;
    overflow:hidden;
 padding:0 2px;
    background:#FFCCFF;
}
demo1{
    height:300px;
    width:90px;
}
demo1 img{
 width:86px;
 height:56px;
 border:0;
 padding-bottom:10px;
}
</style>
</head>

<body>
<div id="demo">
  <div id="demo1">
   <a href="#"><img src="images/lpxx02.jpg" /></a>
   <a href="#"><img src="images/lpxx02.jpg" /></a>
   <a href="#"><img src="images/lpxx02.jpg" /></a>
   <a href="#"><img src="images/lpxx02.jpg" /></a>
   <a href="#"><img src="images/lpxx02.jpg" /></a>
  </div>
  <div id="demo2"></div>
</div>
<script type="text/javascript">
    var speed=20; //数字越大速度越慢
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
    tab.scrollTop=tab.scrollHeight
    function Marquee(){
    if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
    tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
    else{
    tab.scrollTop--
    }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.οnmοuseοver=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
    tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器

</script>
</body>
</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>无标题文档</title>
<style type="text/css">
*{margin:0 auto; padding:0;}
#demo {
  background: #FFF;
  overflow:hidden;
  width: 500px;
}
#demo img {
   border: 3px solid #F2F2F2;
}
#indemo {
  float: left;
  width: 800%;
}
#demo1 {
  float: left;
}
#demo2 {
     float: left;
}
</style>
</head>

<body>
<div id="demo">
 <div id="indemo">
  <div id="demo1">
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
  </div>
  <div id="demo2"></div>
 </div>
</div>
<script>
    var speed=20; //数字越大速度越慢
    var tab=document.getElementById("demo");
    var tab1=document.getElementById("demo1");
    var tab2=document.getElementById("demo2");
    tab2.innerHTML=tab1.innerHTML;
    function Marquee(){
    if(tab2.offsetWidth-tab.scrollLeft<=0)
    tab.scrollLeft-=tab1.offsetWidth
    else{
    tab.scrollLeft++;
    }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.οnmοuseοver=function() {clearInterval(MyMar)};
    tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
</script>
</body>
</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>无标题文档</title>
<style type="text/css">
*{margin:0 auto; padding:0;}
#demo {
  background: #FFF;
  overflow:hidden;
  width: 500px;
}
#demo img {
   border: 3px solid #F2F2F2;
}
#indemo {
  float: left;
  width: 800%;
}
#demo1 {
  float: left;
}
#demo2 {
     float: left;
}
</style>
</head>

<body>
<div id="demo">
 <div id="indemo">
  <div id="demo1">
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
   <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
  </div>
  <div id="demo2"></div>
 </div>
</div>
<script>
 var speed=20; //数字越大速度越慢
 var tab=document.getElementById("demo");
 var tab1=document.getElementById("demo1");
 var tab2=document.getElementById("demo2");
 tab2.innerHTML=tab1.innerHTML;
 function Marquee(){
 if(tab.scrollLeft<=0)
 tab.scrollLeft+=tab2.offsetWidth
 else{
 tab.scrollLeft--
 }
 }
 var MyMar=setInterval(Marquee,speed);
 tab.οnmοuseοver=function() {clearInterval(MyMar)};
 tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
</script>
</body>
</html>

 

 

wulongde353607
关注
专栏目录
html实现段落左右无缝滚动,javascript实现左右控制无缝滚动
weixin_42467533的博客
06-09 383
无缝滚动是项目中经常需要用到的一种特效，网上也有很多的示例代码，这里给大家分享的是一段比较简单实用的，而且兼容性也不错的代码，小伙伴们仔细研究下吧。html 代码：<html><head lang="en"><meta charset="UTF-8"><title>无缝滚动title><script src="js/0010.js"&gt...
随滚动条移动的5个层(左上、左下、中间、右上、右下)
08-16
随滚动条移动的5个层(左上、左下、中间、右上、右下)
JS让图片无缝滚动的实现（JS代码讲解，非直拷型内容）
learn_2的专栏
11-16 3838
为了教学需要，整理了一下JS图片无缝滚动的代码。 以前一直均是拷贝网上的经典JS滚动代码，稍为更改即成自己的了，现重新讲解下，JS是如何让图片们动起来的！ 下面是网上源码，百度一大堆，多数是这个样，如果你是为了解决实际效果显示，请拷贝，勿需向后翻看。 图片滚动 #demo { background: #FFF; overflow:h
web前端js基础------制作滚动图片
m0_64148419的博客
11-07 1641
web前端基础使用JS制作一个滚动图片
【前端】实现图片无缝滚动·教程
qq_45677671的博客
02-04 779
文章目录效果图：需求分析：源代码：所用图片： 效果图： 需求分析： 实现无缝滚动 源代码： 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图片滚动（无缝、平滑、上下左右滚动）代码大全
极客神殿
06-17 7184
innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth: 获取对象的滚动宽度 offsetHeight: 获取对象相...
图片无缝滚动插件上下左右图片无缝滚动代码.zip
07-11
这个压缩包文件"图片无缝滚动插件上下左右图片无缝滚动代码.zip"显然包含了一套实现这种效果的JavaScript代码。以下是关于这个插件及其相关技术的知识点详解： 1. **JavaScript基础**：无缝滚动效果主要依赖...
jquery上下左右图片无缝滚动代码
04-07
"jquery上下左右图片无缝滚动代码"是一个基于jQuery的插件，主要用于创建图片滚动展示的效果，尤其适用于产品展示或者新闻更新等场景。 这个插件允许图片在页面上实现上下或左右的平滑滚动，给用户带来连续、无断裂...
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)
10-20
1. **向下滚动代码解析**： - `#colee` 是一个包含图片的父容器，设置了`overflow:hidden`以隐藏超出可视区域的图片。 - `#colee1` 是实际展示的图片容器，包含了多张图片。 - `#colee2` 是`#colee1`的克隆，用于...
jquery上下左右图片无缝滚动代码.zip
11-21
本资源"jquery上下左右图片无缝滚动代码.zip"提供了一种实现图片上下左右无缝滚动效果的方法，这对于网页设计尤其是产品展示或广告轮播组件来说非常实用。这种效果可以为网站增添动态感，提升用户体验。 首先，我们...
jquery图片无缝滚动插件上下左右图片无缝滚动代码
11-16
标题中的“上下左右图片无缝滚动代码”表明我们要讨论的是一个可以支持四个方向滚动的插件。实现这种效果通常包括以下步骤： 1. **选择器与元素集合**：使用jQuery的选择器选取需要滚动的图片容器，例如`$("#image...
js实现图片滚动
学习的约束力，提醒自己
03-23 3164
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
Html中控制文字的排版方向（左-右-上-下或者上-下-右-左）
热门推荐
qq_33398790的博客
05-25 2万+
语法： writing-mode : lr-tb | tb-rl参数： lr-tb : 左-右，上-下tb-rl : 上-下，右-左测试Html代码如下&lt;!DOCTYPE html &gt;&lt;html&gt;&lt;head&gt;&lt;style &gt;&lt;/style&gt;&lt;/head&gt;&lt;body&gt;    &lt;div contented
JavaScript学习笔记——简单无缝循环滚动展示图片的实现
weixin_30478619的博客
01-19 2584
今天做了一个简单的无缝循环滚动的实例，这种实例在网页中其实还挺常见的，下面分享一下我的学习收获。 首先，无缝滚动的第一个重点就是——动。关于怎么让页面的元素节点动起来，这就得学明白关于JavaScript中定时器的相关知识。 　　JS中的创建定时器的方法包括两种：setTimeout和setInterval。首先它们接收的参数相同：第一个参数是一个函数，用于定时器执行，第二个参数是一...
嵌入式学习之闪光的摆.zip
09-24
嵌入式学习，电子信息技术
cache的snoop vs directory，两种方式比较
09-24
cache的snoop vs directory，两种方式比较
基于java的博客系统的开题报告.docx
09-24
基于java的博客系统的开题报告.docx
基于Python, JavaScript和HTML的交互式背单词学习工具设计源码
最新发布
09-24
该项目是一个基于Python, JavaScript和HTML的交互式背单词学习工具设计源码，主要使用JavaScript语言开发。项目包含27个文件，其中8个文本文件（txt），6个Python脚本（py），4个Markdown文档（md），3个JavaScript文件（js），2个JSON配置文件，1个Git忽略文件（gitignore），1个许可证文件（LICENSE），1个原型定义文件（proto）和1个HTML页面文件。这个工具旨在通过交互式学习提高用户的单词记忆效率。
JavaScript无缝左右滚动代码实现
"该资源提供了一段JavaScript代码，用于实现页面元素的左右无缝滚动效果。主要功能包括上滚和下滚操作，具有鼠标按下、抬起和移出时的事件处理，以及自动播放功能。" 在JavaScript中，左右滚动通常用于展示一串连续...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值