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

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

                                                                       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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
随滚动条移动的5个层(左上、左下、中间、右上、右下)
08-16
随滚动条移动的5个层(左上、左下、中间、右上、右下)
【前端】实现图片无缝滚动·教程
qq_45677671的博客
02-04 600
文章目录效果图：需求分析：源代码：所用图片： 效果图： 需求分析： 实现无缝滚动 源代码： 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
web前端js基础------制作滚动图片
m0_64148419的博客
11-07 1520
web前端基础使用JS制作一个滚动图片
js图片从左到右滚动循环
魅网工作室的专栏
04-11 4977
已测试过，正常的！                                                                                                                                                                               
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全
珍惜所有的一切
11-18 2573
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全   innerHTML:    设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft:   设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:    设置或获取位于对象最顶端和窗口中可见内容的最顶端之间
jquery上下左右图片无缝滚动代码
04-07
"jquery上下左右图片无缝滚动代码"是一个基于jQuery的插件，主要用于创建图片滚动展示的效果，尤其适用于产品展示或者新闻更新等场景。 这个插件允许图片在页面上实现上下或左右的平滑滚动，给用户带来连续、无断裂...
图片无缝滚动插件上下左右图片无缝滚动代码.zip
07-11
这个压缩包文件"图片无缝滚动插件上下左右图片无缝滚动代码.zip"显然包含了一套实现这种效果的JavaScript代码。以下是关于这个插件及其相关技术的知识点详解： 1. **JavaScript基础**：无缝滚动效果主要依赖...
jquery上下左右图片无缝滚动代码.zip
11-21
本资源"jquery上下左右图片无缝滚动代码.zip"提供了一种实现图片上下左右无缝滚动效果的方法，这对于网页设计尤其是产品展示或广告轮播组件来说非常实用。这种效果可以为网站增添动态感，提升用户体验。 首先，我们...
jquery图片无缝滚动插件上下左右图片无缝滚动代码
11-16
标题中的“上下左右图片无缝滚动代码”表明我们要讨论的是一个可以支持四个方向滚动的插件。实现这种效果通常包括以下步骤： 1. **选择器与元素集合**：使用jQuery的选择器选取需要滚动的图片容器，例如`$("#image...
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全(推荐)
10-20
1. **向下滚动代码解析**： - `#colee` 是一个包含图片的父容器，设置了`overflow:hidden`以隐藏超出可视区域的图片。 - `#colee1` 是实际展示的图片容器，包含了多张图片。 - `#colee2` 是`#colee1`的克隆，用于...
JavaScript学习笔记——简单无缝循环滚动展示图片的实现
weixin_30478619的博客
01-19 2571
今天做了一个简单的无缝循环滚动的实例，这种实例在网页中其实还挺常见的，下面分享一下我的学习收获。 首先，无缝滚动的第一个重点就是——动。关于怎么让页面的元素节点动起来，这就得学明白关于JavaScript中定时器的相关知识。 　　JS中的创建定时器的方法包括两种：setTimeout和setInterval。首先它们接收的参数相同：第一个参数是一个函数，用于定时器执行，第二个参数是一...
JS让图片无缝滚动的实现（JS代码讲解，非直拷型内容）
learn_2的专栏
11-16 3828
为了教学需要，整理了一下JS图片无缝滚动的代码。 以前一直均是拷贝网上的经典JS滚动代码，稍为更改即成自己的了，现重新讲解下，JS是如何让图片们动起来的！ 下面是网上源码，百度一大堆，多数是这个样，如果你是为了解决实际效果显示，请拷贝，勿需向后翻看。 图片滚动 #demo { background: #FFF; overflow:h
js实现图片滚动
学习的约束力，提醒自己
03-23 3153
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
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
vue3实现左右照片无缝滚动轮播图
09-21
Vue.js 3可以使用transition组件和v-for指令来实现左右照片无缝滚动轮播图。首先，你需要设置一个容器元素来包裹照片，并设置它的宽度为照片的宽度的n倍，其中n为照片的数量。然后，使用v-for指令在容器中循环渲染照片。接下来，使用transition组件和transform属性来实现左右滚动效果。最后，使用setInterval函数来实现自动切换照片的功能。 代码示例如下： ```html <template> <div class="carousel-container"> <transition-group name="carousel-slide" tag="div"> <div v-for="(photo, index) in photos" :key="index" class="carousel-slide-item"> <img :src="photo" alt="photo" /> </div> </transition-group> </div> </template> <script> export default { data() { return { photos: [ "photo1.jpg", "photo2.jpg", "photo3.jpg", // 添加更多照片 ], currentIndex: 0, intervalId: null, }; }, mounted() { this.startAutoSlide(); }, beforeUnmount() { this.stopAutoSlide(); }, methods: { startAutoSlide() { this.intervalId = setInterval(() => { this.slideRight(); }, 3000); }, stopAutoSlide() { clearInterval(this.intervalId); }, slideLeft() { this.currentIndex = (this.currentIndex - 1 + this.photos.length) % this.photos.length; }, slideRight() { this.currentIndex = (this.currentIndex + 1) % this.photos.length; }, }, }; </script> <style> .carousel-container { width: 100%; overflow: hidden; } .carousel-slide-item { float: left; width: 100%; } .carousel-slide-enter-active, .carousel-slide-leave-active { transition: transform 0.5s; } .carousel-slide-enter, .carousel-slide-leave-to { transform: translateX(100%); } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值