图片连续滚动

最新推荐文章于 2025-05-07 12:48:43 发布
最新推荐文章于 2025-05-07 12:48:43 发布
阅读量646 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： scroll border table function div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sunsnow_swift/article/details/1756486
本文介绍了一种使用HTML和JavaScript实现的图片滚动展示效果。通过设置特定的表格布局和利用JavaScript控制滚动条的位置，使得图片能够在限定区域内平滑滚动显示。此方法适用于创建动态网页背景或轮播图效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<body>
<div align="center" bgcolor="#ffffff">
    <div id="scroll_div" style="overflow: hidden; width: 760px; height: 70px ;margin-top:0px; margin-bottom:0px; background-color:ffffff;" align="center" >
   <table width="760" border="0" cellpadding="0" cellspacing="0  bgcolor="#ffffff">
  <tr>
   <td width="760" id="scroll_begin">
    <table width="136"" border="0" cellspacing="0" cellpadding="0">
      <tr>
     <td width="135">
      <table width="76" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><p>&nbsp;</p>
                                          <p><A href="link 1" target=_blank>pic 1 </A></p>
                                          <p>&nbsp;</p></TD>
                                        </tr>
                                        <tr>
                                        </tr>
                      </table>      
     </td>
      <td width="135">
         <table width="76" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 2" target=_blank>pic 2 </A></TD>
                                        </tr>
                                        <tr>
                                        </tr>
                      </table>
    </td>
      <td width="135">
      <table width="76" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle" >&nbsp;&nbsp;</td>
                                          <TD width=124><A href="limk 3" target=_blank>pic 3 </A></TD>
                            </tr>
                            <tr>
                            </tr>
                      </table>
    </td>
      <td width="135">
     <table width="76" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle" >&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 4" target=_blank>pic 4 </A></TD>
                             </tr>
                             <tr>
                             </tr>
                      </table>
    </td>
      <td width="135">
     <table width="76" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle" >&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 5" target=_blank>pic 5 </A></TD>
                               </tr>
                               <tr>
                               </tr>
                      </table>
    </td>
      <td width="135">
          <table width="76" border="0" cellspacing="0" cellpadding="0">
                               <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 6" target=_blank>pic 6 </A></TD>
                               </tr>
                               <tr>
                               </tr>
                      </table>
    </td>
                  <td width="135">
      <table width="76" border="0" cellspacing="0" cellpadding="0">
                               <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 7" target=_blank>pic 7 </A></TD>
                               </tr>
                               <tr>
                               </tr>
                        </table>
     </td>
     <td width="135">
      <table width="76" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 8" target=_blank>pic 8 </A></TD>
                                </tr>
                                <tr>
                                </tr>
                        </table>
     </td>
     <td width="135">
      <table width="76" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 9" target=_blank>pic 9 </A></TD>
                                </tr>
                                <tr>
                                </tr>
                      </table>
     </td>
     <td width="135">
      <table width="76" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 10" target=_blank>pic 10 </A></TD>
                                </tr>
                                <tr>
                                </tr>
                        </table>
     </td>
    </tr>
    </table>
     </td>
     <td width="10" id="scroll_end">
     </td>
   </tr>
     </table>
    </div>
</div>

<SCRIPT>
 var speed=1 //数值越小，速度越快，默认30毫秒
 var scroll_end = document.getElementById("scroll_end");
 var scroll_div = document.getElementById("scroll_div");
 scroll_end.innerHTML=scroll_begin.innerHTML
 function Marquee(){
 if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
 scroll_div.scrollLeft-=scroll_begin.offsetWidth
 else{
 scroll_div.scrollLeft++
 }
 }
 var MyMar=setInterval(Marquee,speed)
 scroll_div.onmouseover=function() {clearInterval(MyMar)}
 scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
 </SCRIPT>
</body> 

 

sunsnow_swift
关注
图片无缝滚动的原理和实例
一笑的博客
10-12 7780
无缝滚动的结构：一共两个盒子，第一个大盒子下套第二个大盒子，第二个大盒子下有4张图片，第一个大盒子宽度固定为600px，第二个大盒子宽度是400%; 原理：第一个盒子相对浮动，第二个盒子绝对浮动，让第二个盒子的left值一直变化。当left值小于等于4张图片的宽度的时候，让left值瞬间归0，用户看不到，以为是无缝滚动。 例子：<!DOCTYPE html> <html> <head lang=
html中图片连续滚动代码,[转载]网页设计中的图片连续滚动效果——代码
weixin_32687311的博客
06-08 2432
style="overflow:hidden;width:500px;">border="0">id="butong_net_left1" valign="top"align="center">border="0">src="src="插入需要滚动的图片">src="插入需要滚动的图片">src="插入需要滚动的图片">src="插入需要滚动的图片"&gt...
js图片滚动
12-31
js图片滚动
图片滚动
hanyuwebant的博客
05-24 561
图片的无缝滚动 一、HTML<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="gundong.css" /><!--引入css:link:css;--> <script src=
图片滚动例子
Kusers的博客
01-18 566
滚动测试 #window{ width: 100%; height: 300px; background: #333; overflow: hidden; } #rool{ height: 300px; padding: 0px; margin: 0px; } #rool li{ list-style: none; float: left;
图片左右滚动特效，很简单，你绝对看的懂
04-19
这是一个左右图片滚动的特效，代码很短，但是功能却完成实现了，你绝对可以看的懂。
实现网页广告图片连续滚动的完整HTML代码
weixin_42593701的博客
05-07 839
通过本章节的介绍，我们学习了JavaScript基础语法，并利用这些基础构建了动态图片轮播的基本功能。我们了解了定时器的使用、事件监听以及如何动态更新图片显示。在后续的内容中，我们将进一步探索图片滚动与位置调整逻辑，确保广告轮播在不同设备上的兼容性和用户体验。接下来的章节，我们将深入到jQuery库的应用，利用这个流行的JavaScript库简化我们的代码，并进一步提高开发效率。
js实现图片连续滚动播放
qq_40261601的博客
02-18 3746
图片连续滚动播放效果
dw自动滚动图片_Dreamweaver连续滚动图片的制作
weixin_42363565的博客
02-23 1803
该楼层疑似违规已被系统折叠隐藏此楼查看此楼横向不间断连续滚动图片,将下面代码放到你要显示的位置//morejavascriptfromhttp://www.smallrain.netdocument.write('');document.write('');document.write('');document.write('');document.write('');docum...
html中div中图片滚动,div+css布局的图片连续滚动js实现代码
weixin_29523709的博客
06-04 650
html布局代码无标题文档 toleft("demo","demo1","demo2",30,"onedemo");//toright("demo0","demo11","demo22",20,"ti2");js核心代码//调用向左滚动//toleft("demo","demo1","demo2",30,"ti1")//调用向右滚动...
div+css布局的图片连续滚动js实现代码
10-29
总结起来，这个实例是利用 `div` 和 `css` 创建一个图片连续滚动的布局，通过 `JavaScript` 实现动态滚动效果。开发者可以根据需求调整 CSS 样式和 JavaScript 代码，实现自定义的滚动速度、方向和暂停功能。同时，...
JavaScript实现图片连续滚动的案例
01-17
本案例将详细介绍如何使用JavaScript实现图片连续滚动，特别地，我们将关注“MarqueeScrollLeft”这个实现方法，它代表了向左滚动的效果。 首先，我们需要理解基本的HTML结构，用于放置要滚动的图片。通常，我们会...
js jquery做的图片连续滚动代码
10-30
在JavaScript与jQuery中，实现图片连续滚动是一种常见的网页动态效果，常用于轮播图或广告展示。此代码段中，开发者遇到了点击图片后返回时出现的问题，这通常与图片滚动的逻辑和状态管理有关。接下来，我们将详细...
图片连续滚动代码[兼容IE/firefox]
01-19
### 图片连续滚动代码实现与兼容性处理 #### 一、引言 在网页设计中，图片滚动是一种常见的视觉效果，它可以为用户带来更加生动有趣的浏览体验。然而，在不同的浏览器中实现这一效果时，可能会遇到各种兼容性问题...
Pygame - 背景图片连续滚动
z2014z的博客
04-25 2594
Pygame - 背景图片连续滚动 方法：让背景图像分别在（0，0）和（0，-img.heigh）两个位置向下移动它们，当其中一个位于（0，img.heigth）位置时，再次将其放置在（0，-img.heigh）位置。 具体代码： import pygame import sys import pygame.sprite as sprite theClock = pygame.time.Clock() # 载入图片 background = pygame.image.load('background.g
HTML网页设计图片滚动,HTML网页上连续滚动图片的制作
weixin_39732491的博客
06-04 3922
制作方法：相关文件：在页面~相关位置加入代码：新建scrollimg-pic.htm页面，插入相同大小的图片若干张。为使它不停顿地连续播放，请在同一行中，连续插入图片二至三次。类似于文件。在每一张的图片上，添加特效：停顿效果代码：onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.f...
订单管理部组织架构职责及岗位设置.doc
最新发布
08-07
订单管理部组织架构职责及岗位设置.doc
C#和JavaScript实现图片连续滚动效果
本知识点将详细介绍如何实现图片连续滚动的效果，以及相关技术的实现细节。 ### C# 与 JavaScript 结合的知识点 #### C# 后端代码编写 在C#后端，通常会通过ASP.NET Web Forms或者MVC框架来编写服务端逻辑。后端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值