横向滚动图片,javascript实现的例子

最新推荐文章于 2025-07-15 13:55:33 发布
最新推荐文章于 2025-07-15 13:55:33 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 脚本语言[工具] 文章标签： javascript border function generator table div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rainv/article/details/1538666

从http://www.gzdesignweek.com/页面得到的,学习学习.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE >  New Document  </ TITLE >
< META  NAME ="Generator"  CONTENT ="EditPlus" >
< META  NAME ="Author"  CONTENT ="" >
< META  NAME ="Keywords"  CONTENT ="" >
< META  NAME ="Description"  CONTENT ="" >
</ HEAD >

< BODY >
                   < TBODY >
                     < TR >
                       < TD >< DIV  id =xxb 
                   style ="BACKGROUND: #EBEBDF; OVERFLOW: hidden; WIDTH: 800px; COLOR: #000000; HEIGHT: 147px"  
                  align =center >
                           < TABLE  height =114  cellSpacing =0  cellPadding =0 
                   align =center  border =0  cellspace ="0" >
                             < TBODY >
                               < TR >
                                 < TD  id =xxb1  vAlign =center >< TABLE  align ="center" >
                                   < TBODY >
                                     < TR >
                                       < TD  vAlign =center >< div  align ="center" >< a  href ="http://www.gzdesignweek.com/06ch_photo.htm#a1"  target ="_blank" >< img  src ="images/absolute01.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ div ></ TD >
                                       < TD  vAlign =center >< a  href ="http://www.gzdesignweek.com/06ch_photo.htm#a2"  target ="_blank" >< img  src ="images/absolute02.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =center >< a  href ="http://www.gzdesignweek.com/06ch_photo.htm#a3"  target ="_blank" >< img  src ="images/absolute03.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =center >< a  href ="http://www.gzdesignweek.com/06ch_design02.htm#a4"  target ="_blank" >< img  src ="images/absolute020.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =center >< a  href ="http://www.gzdesignweek.com/06ch_design03.htm#a5"  target ="_blank" >< img  src ="images/absolute012.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =center >< a  href ="http://www.gzdesignweek.com/06ch_design01.htm#a6"  target ="_blank" >< img  src ="images/absolute017.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =center >< a  href ="http://www.gzdesignweek.com/06ch_design02.htm#a7"  target ="_blank" >< img  src ="images/absolute018.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =center >< a  href ="http://www.gzdesignweek.com/06ch_design02.htm#a8"  target ="_blank" >< img  src ="images/absolute022.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =center >< a  href ="http://www.gzdesignweek.com/06ch_photo.htm#a9"  target ="_blank" >< img  src ="images/absolute015.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =center >< a  href ="http://www.gzdesignweek.com/06ch_photo.htm#a10"  target ="_blank" >< img  src ="images/absolute023.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =center >< a  href ="http://www.gzdesignweek.com/06ch_photo.htm#a11"  target ="_blank" >< img  src ="images/absolute025.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =center >< a  href ="http://www.gzdesignweek.com/06ch_photo.htm#a12"  target ="_blank" >< img  src ="images/absolute029.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =top >< a  href ="http://www.gzdesignweek.com/06ch_design02.htm#a13"  target ="_blank" >< img  src ="images/absolute030.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =top >< a  href ="http://www.gzdesignweek.com/06ch_icward.htm#a14"  target ="_blank" >< img  src ="images/icward01.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =top >< a  href ="http://www.gzdesignweek.com/06ch_danishday.htm#a15"  target ="_blank" >< img  src ="images/danish011.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =top >< a  href ="http://www.gzdesignweek.com/06ch_hmj.htm#a16"  target ="_blank" >< img  src ="images/prize03.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =top >< a  href ="http://www.gzdesignweek.com/06ch_venue.htm#a17"  target ="_blank" >< img  src ="images/venue03.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =top >< a  href ="http://www.gzdesignweek.com/06ch_cityscape.htm#a18"  target ="_blank" >< img  src ="images/cityscape07.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =top >< a  href ="http://www.gzdesignweek.com/06ch_i_mart.htm#a19"  target ="_blank" >< img  src ="images/mart04.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =top >< a  href ="http://www.gzdesignweek.com/06ch_innovation.htm#a20"  target ="_blank" >< img  src ="images/innovation010.JPG"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                       < TD  vAlign =top >< a  href ="http://www.gzdesignweek.com/06ch_jyj.htm#a21"  target ="_blank" >< img  src ="images/jyj04.jpg"  width ="200"  height ="145"  border ="0" ></ a ></ TD >
                                     </ TR >
                                   </ TBODY >
                                 </ TABLE ></ TD >
                                 < TD  width ="1"  vAlign =top  id =xxb2 ></ TD >
                               </ TR >
                               < SCRIPT >
  var speed=30
  xxb2.innerHTML=xxb1.innerHTML
  function Marquee(){
  if(xxb2.offsetWidth-xxb.scrollLeft<=0)
  xxb.scrollLeft-=xxb1.offsetWidth
  else{
  xxb.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  xxb.onmouseover=function() {clearInterval(MyMar)}
  xxb.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
                                           </ SCRIPT >
</ BODY >
</ HTML >
 
图片横向平滑滚动JS代码
08-05
图片横向平滑滚动JS代码，非常好用，欢迎下载
JS特效——广告图由左往右滚动
qq_42396791的博客
09-03 523
&lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;从左到右滚动广告效果&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; #container { margin: 100px auto; width: 800px;
可以左右移动横向无缝滚动的JS图片展示
12-09
可以左右移动横向无缝滚动的JS图片展示，不明白的可以问我
js左右滚动实例
weixin_34274029的博客
11-23 109
&lt;DIV id="demo" style="OVERFLOW: hidden; WIDTH: 50px;"&gt; &lt;TABLE&gt; &lt;TR&gt; &lt;TD id="demo1"&gt; &lt;table width="150"&gt; &lt;tr&gt; &lt;td widt
JavaScript实现图片横向移动（转载）
weixin_30641465的博客
05-07 470
<scripttype="text/javascript"defer> varmarquee_spd=25;//滚动速度，数值越小越快 varrepeat=null; varobj_marquee=document.getElementById("ImgList");//本例中的<divid=ImgList> functionmarqu...
实现横向滚动图片的网页设计技术
weixin_35903223的博客
04-27 798
函数是JavaScript的核心概念之一。函数可以封装一块代码，并在需要时调用执行。在JavaScript中，定义函数可以使用函数声明或函数表达式，而箭头函数是ES6中引入的一种更简洁的函数书写方式：// 函数声明// 函数表达式// 箭头函数函数可以被调用多次，每次调用都可以传入不同的参数。函数调用时，按照声明时的参数列表接受参数值。函数的作用域决定了函数内部定义的变量或函数只能在其作用域内被访问。在JavaScript中，有全局作用域和函数作用域。
实现JavaScript文字横向滚动效果
weixin_42592399的博客
05-07 920
文档对象模型（Document Object Model，简称DOM）是HTML和XML文档的编程接口。它以树形结构表示文档，每个节点都是文档的一个组成部分，并且每个节点都有自己的属性和方法。DOM允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM的组成主要包括以下几个部分：文档根节点（Document Node）：代表整个文档，是所有其他节点的根节点。元素节点（Element Nodes）：代表文档中的一个HTML元素，如<div><p><span>等。
实现图片横向滚动特效的jQuery教程
weixin_42599558的博客
07-11 417
jQuery自2006年发布以来，一直是前端开发人员最喜爱的JavaScript库之一。它简化了HTML文档遍历和事件处理，同时提供动画效果和AJAX交互，极大地提高了开发效率和页面交互性。本章将带你入门jQuery，掌握其核心概念，并深入理解其选择器的使用方法。首先，你需要了解jQuery是一个封装了大量通用操作的库，它提供了一套简洁的API，让我们能够用更少的代码完成复杂的任务。在jQuery的世界中，选择器是用来选取页面中的特定元素的工具，这可能是根据ID、类名、标签名或属性等进行选择。
实现网页中图片不间断横向滚动的完整指南
最新发布
weixin_42583683的博客
07-15 433
随后，我们会对实现图片不间断横向滚动效果的技术进行概述。这包括但不限于HTML、CSS以及JavaScript的运用。我们将讨论如何利用这些技术，以及它们在实现滚动效果中的各自作用和相互协作的机制。最后，我们会总结本章所涵盖的关键概念，并为接下来的内容铺垫。这包括对CSS布局、动画以及JavaScript交互逻辑的探讨，这些都是实现一个顺畅的横向滚动效果不可或缺的部分。通过本章的学习，读者将对横向滚动效果的实现原理有一个基本的理解，为深入学习下一章做好准备。
新浪横向滚动广告JavaScript实现代码
"这篇资源提供的是新浪网使用的横向不间断滚动广告的JavaScript代码示例，适合开发者参考学习如何实现...如果你想要在自己的网站上创建类似的新浪网横向滚动广告，可以参考这段代码，结合自己的需求进行定制和扩展。
图片横向动画滚动
03-13
在本例中，我们将探讨如何实现图片的自动横向滚动，并在鼠标悬停时停止滚动。 首先，我们需要一个HTML结构来承载这些图片。每个图片将被包含在一个可滑动的容器内，例如`<div>`元素。HTML代码可能如下所示： ```...
横向滚动图片特效代码
03-20
在实际项目中，可能会使用现有的库或框架，如Bootstrap的Carousel组件或Swiper.js，它们提供了丰富的功能和优化，可以更轻松地实现横向滚动图片特效。但理解基础原理和手动实现这一过程，对于提升你的前端开发技能是...
图片横向滚动实现方法及详细注释解析
标题“图片滚动例子(带注释)”及描述提到的内容指向了Web开发中实现图片横向滚动效果的多个技术层面。以下知识点涉及了使用JavaScript（js）、jQuery以及ASP.NET C# (Asp页面)来完成图片滚动效果。 ### JavaScript...
横向图片滚动实现教程：JS、jQuery与C# Asp方法解析
实现横向滚动，我们需要操作与图片相关的DOM元素，并通过JavaScript来实现滚动动画效果。 #### 关键技术点 - **DOM操作**：通过JavaScript访问和修改网页元素。 - **定时器**：使用`setInterval`或`setTimeout`来...
js实现图片横向滚动
wang1253的博客
04-03 4946
&lt;!doctype html&gt;&lt;html lang="en"&gt;    &lt;head&gt;        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;                    &lt;meta name="keywords
jQuery实现页面滚动条自动滚动到需要的位置
热门推荐
zhangzeshan
07-23 1万+
代码如下： <script> $(function(){ $('html,body').animate({scrollTop:1000},'slow'); }) </script> 解读代码：在载入html页面的body这一块内容中，实现滚动进行展示body的某一块内容，scrollTop方法 进行滚动1000像素 （像素越大滚动的越下去，也...
使用指定Jdk来启动eclipse
Blog内容迁移至dolphin8.cn
07-17 2147
无法设置java_home的时候使用这个bat来启动吧。把下边代码保存成startup.bat不要关闭那个命令行窗口,关闭它的话会连eclipse一起关掉。@echo off@echo 使用指定的jdk启动eclipse..@echo 使用前先修改这个脚本指定JAVA_RUN和ECLIPSE_RUN文件目录set JAVA_RUN=D:/jdk1.5.0_07/bin/javaset EC
使用div给单元格td增加滚动条效果
Blog内容迁移至dolphin8.cn
03-11 1314
  "http://www.w3.org/TR/html4/loose.dtd">    无标题文档  td { SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #dfdfdf; SCROLLBAR-D
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值