关于某段代码不能使图片滚动的解决办法！

最新推荐文章于 2021-06-09 19:06:40 发布
最新推荐文章于 2021-06-09 19:06:40 发布
阅读量143 收藏
点赞数 1
文章标签： xhtml javascript ViewUI

1.首先去掉第一行的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2：设置图片总的宽度超过div的宽带。

--------------------------------------------以下是图片滚动的代码--------------------------------------------------------------

<table width="900" height="150" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width=800 height=120 align=center class=border01 bgcolor=#FFFFFF>
<div id=demo style=overflow:hidden;width:800;align=center>
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr>
<td valign=top bgcolor=ffffff id=demo1>
<table width=90% border=0 cellspacing=0 cellpadding=0>
<tr align=center>
<td><a href="http://127.0.0.1/POP/POPshow.asp?id=28"><IMG src="http://202.207.16.34/tp/09032602.jpg" width=180 height=135 border="0"></a></td>
<td><a href="http://127.0.0.1/POP/POPshow.asp?id=28"><IMG src="http://202.207.16.34/tp/09032602.jpg" width=180 height=135 border="0"></a></td>
<td><a href="http://127.0.0.1/POP/POPshow.asp?id=28"><IMG src="http://202.207.16.34/tp/09032602.jpg" width=180 height=135 border="0"></a></td>
<td><a href="http://127.0.0.1/POP/POPshow.asp?id=28"><IMG src="http://202.207.16.34/tp/09032602.jpg" width=180 height=135 border="0"></a></td>
<td><a href="http://127.0.0.1/POP/POPshow.asp?id=28"><IMG src="http://202.207.16.34/tp/09032602.jpg" width=180 height=135 border="0"></a></td>
</tr>
</table>
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}

</script>

版权声明：本文为博主原创文章，未经博主允许不得转载。

iteye_10465
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片滚动代码
和上帝躲猫猫
11-04 1662
这是个非常简单的设置图片滚动效果的代码，但是注意这段代码在使用时不能加<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 图片滚动代码 (从右向左滚动) <marquee scrollamount=1 s
java实现图片滚动_怎么用Java代码使图片自行滚动浏览
weixin_42510805的博客
02-13 1500
图片循环滚动代码和图片无缝滚动代码先介绍一下它的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间。先了解一...
图片横向滚动 01-兼容IE8和Chrome浏览器
zyytaiyame的博客
12-06 853
在线测试打包下载
一个页面放2段图片滚动代码出现冲突的问题如何解决
09-05
然而，当在一个页面上放置两段相同的图片滚动代码时，可能会遇到代码冲突的问题，导致图片无法正常流动显示。这个问题通常发生在JavaScript或者CSS中，因为它们都控制着元素的行为。以下是一些解决此类冲突的方法和...
wincc7.4 sp1滚动条和全局库不显示的解决办法.docx
05-06
wincc7.4 sp1滚动条和全局库不显示的解决办法
Javascript实现图片不间断滚动的代码
10-22
本文将详细介绍如何使用JavaScript实现一个图片不间断滚动的代码。 首先，我们需要理解核心函数`scrollObject`的参数及其作用： 1. `obj`：目标对象ID，即需要滚动的元素ID，例如"demo"。 2. `speed`：滚动速度，...
购物商城图片滚动代码.rar_购物商城图片滚动代码
09-15
"购物商城图片滚动代码"是实现这种体验的关键技术之一，它结合了JavaScript（尤其是jQuery库）的力量，为用户提供动态、吸引人的商品展示方式。 首先，我们来详细探讨jQuery购物商城图片滚动代码的核心功能。jQuery...
JS图片滚动切换数字时钟代码
07-24
3. **定时器（setTimeout和setInterval）**：JavaScript的定时器功能用于周期性执行某段代码。在这个时钟模块中，`setInterval`函数被用来每隔一定时间（通常为1秒）更新时钟显示，确保时间始终与系统同步。 4. **...
几个div+css图片滚动显示的代码
鄢潆
08-19 4727
由下往上的：12br>3456789可以是任何的HTML内容HTMLvar ij=0;t=demo.scrollTopdemo2.innerHTML=demo1.innerHTMLfunction qswhMarquee2(){if (ij==1)returnif(demo2.offsetTop-demo.scrollTopdemo.scro
html5图片向上滚动代码,图片上下滚动代码使用方法
weixin_32001071的博客
06-09 1420
图片上下滚动源代码：var speed=60demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2function Marquee(){//当滚动至demo1与demo2交界时if(demo2.offsetTop-demo.scrollTop<=0)demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端 我觉得这...
写一段heml代码实现图片滚动播放
最新发布
04-21
好的，以下是一个简单的使用 HTML 与 JavaScript 实现图片滚动播放的示例代码： ```html <!DOCTYPE html> <html> <head> <title>图片滚动播放</title> <style> #container { overflow: hidden; } #slider { display: flex; transition: transform 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .slide { flex: 1 0 100%; } .slide img { max-width: 100%; height: auto; } </style> </head> <body> <div id="container"> <div id="slider"> <div class="slide"><img src="img1.jpg"></div> <div class="slide"><img src="img2.jpg"></div> <div class="slide"><img src="img3.jpg"></div> <div class="slide"><img src="img4.jpg"></div> <div class="slide"><img src="img5.jpg"></div> </div> </div> <script> const slider = document.querySelector("#slider"); const slides = document.querySelectorAll(".slide"); let currentSlide = 0; const slideWidth = slides[0].clientWidth; let intervalId; function slide() { currentSlide++; if (currentSlide >= slides.length) { currentSlide = 0; } slider.style.transform = `translateX(-${currentSlide * slideWidth}px)`; } function start() { intervalId = setInterval(slide, 3000); } function stop() { clearInterval(intervalId); } start(); </script> </body> </html> ``` 注：该示例代码实现了一个简单的图片滚动播放功能，通过 JavaScript 控制轮播图的滚动，每 3 秒自动滚动到下一张图片。其中包含了一个包含 5 张图片的轮播图，你可以将 `img1.jpg` 至 `img5.jpg` 替换成你自己的图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值