js(javascript)不间断循环图片

最新推荐文章于 2023-04-10 11:30:40 发布
最新推荐文章于 2023-04-10 11:30:40 发布
阅读量560 收藏
点赞数 1
分类专栏： ajax/javascript 文章标签： javascript function border

转载

 

方法一：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0028)http://jxmemory.com/logo.asp -->
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
 MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px
}
</STYLE>

<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY>
<DIV id=demo 
style="BACKGROUND: #ffffff; OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff; HEIGHT: 85px">
<TABLE cellSpacing=0 cellPadding=0 align=left border=0>
  <TBODY>
  <TR height=85>
    <TD id=demo10 vAlign=top><IMG height=3 src="logo.files/jxmemory.htm" 
      width=0 border=0><BR><NOBR>
      <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#cccccc cellSpacing=0 
      cellPadding=4 width="100%" align=center border=0>
        <TBODY>
        <TR>
          <TD width="100%">
            <TABLE cellSpacing=0 cellPadding=0 width=1300 border=0>
              <TBODY>
              <TR>
                <TD align=middle colSpan=13>&nbsp;</TD></TR>
              <TR>
                <TD align=middle width=100><IMG height=14 
                  src="logo.files/acer.gif" width=45></TD>
                <TD align=middle width=100><IMG height=24 
                  src="logo.files/apple.jpg" width=24></TD>
                <TD align=middle width=100><IMG height=22 
                  src="logo.files/cisco.jpg" width=49></TD>
                <TD align=middle width=100><IMG height=15 
                  src="logo.files/compaq.jpg" width=76></TD>
                <TD align=middle width=100><IMG height=17 
                  src="logo.files/dell.jpg" width=54></TD>
                <TD align=middle width=100><IMG height=24 
                  src="logo.files/fujitsu.gif" width=44></TD>
                <TD align=middle width=100><IMG height=18 
                  src="logo.files/hp.jpg" width=28></TD>
                <TD align=middle width=100><IMG height=16 
                  src="logo.files/ibm.jpg" width=43></TD>
                <TD align=middle width=100><IMG height=24 
                  src="logo.files/intel.gif" width=48></TD>
                <TD align=middle width=100><IMG height=18 
                  src="logo.files/sharp.gif" width=78></TD>
                <TD align=middle width=100><IMG height=23 
                  src="logo.files/sony.jpg" width=50></TD>
                <TD align=middle width=100><IMG height=22 
                  src="logo.files/sun.jpg" width=50></TD>
                <TD align=middle width=100><IMG height=12 
                  src="logo.files/toshiba.jpg" width=65></TD></TR>
              <TR>
                <TD align=middle 
        colSpan=13>&nbsp;</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></NOBR></TD>
    <TD id=demo20 vAlign=top></TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed=30
demo20.innerHTML=demo10.innerHTML
function Marquee1(){

if(demo20.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo10.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
</SCRIPT>
</BODY></HTML>


方法二：

      <DIV id=demo style="OVERFLOW: hidden; WIDTH: 980px; HEIGHT: 87px" 
            align=center>
            <TABLE cellSpacing=0 cellPadding=0 align=left border=0 
cellspace="0">
              <TBODY>
              <TR>
                <TD id=demo1 vAlign=top><table width="1100" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="120"><img src="images/gundong/1.jpg" width="120" height="87"></td>
        <td width="10">&nbsp;</td>
        <td width="120"><img src="images/gundong/2.jpg" width="120" height="87"></td>
        <td width="10">&nbsp;</td>
        <td width="120"><img src="images/gundong/3.jpg" width="120" height="87"></td>
  <td width="10">&nbsp;</td>
        <td width="120"><img src="images/gundong/3.jpg" width="120" height="87"></td>
  <td width="10">&nbsp;</td>
        <td width="120"><img src="images/gundong/3.jpg" width="120" height="87"></td>
  <td width="10">&nbsp;</td>
        <td width="120"><img src="images/gundong/3.jpg" width="120" height="87"></td>
  <td width="10">&nbsp;</td>
        <td width="120"><img src="images/gundong/3.jpg" width="120" height="87"></td>
  <td width="10">&nbsp;</td>
        <td width="120"><img src="images/gundong/3.jpg" width="120" height="87"></td>
       
      </tr>
    </table></TD>
                <TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV>
            <SCRIPT>
        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.onmouseover=function() {clearInterval(MyMar)}
        demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
        </SCRIPT>

yingshao
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jS循环图片
satonglezhang的专栏
05-26 1212
  在中输入代码:= 0) {document.images.show.src = document.slideform.slide[current-1].value;document.slideform.slide.selectedIndex = --current;}else last();}function first() {current = 0;document.images.show.
Javascript实现图片不间断滚动的代码
10-22
【JavaScript 实现图片不间断滚动】 在网页设计中，图片滚动是一种常见的动态效果，可以吸引用户的注意力，提升用户体验。本文将详细介绍如何使用JavaScript实现一个图片不间断滚动的代码。 首先，我们需要理解...
js 循环输出图片
weixin_30362083的博客
08-25 343
　 　　首先，写本文的目的的为了循环显示广告，本公司的广告都是写成.js文件，然后前台显示的时候读取js文件,本文为了简便，把循环显示的图片引申为数 字0和1，每隔几秒显示0和1，在广告位上就是显示两段不通的js,也就是不同德广告,具体代码如下:　　　　　　　　　　　　　　　　　　　　　　　　 　　　　<head runat="server"> <title&...
图片循环滚动
hzcaituowj的专栏
12-31 330
JS不间断循环滚动   style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid"  cellSpacing=0 cellPadding=0 width=750 align=c
JS图片循环滚动
yh_bxhl的专栏
11-04 2957
图片滚动 #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 {
js图片循环播放
weixin_42976232的博客
05-16 761
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div{ border: 1px solid red; width: 218px; height: 218px; margin: 50px aut...
不间断图片循环滚动示例
08-23
在IT领域，尤其是在网页设计和用户体验优化中，"不间断图片循环滚动示例"是一个常见的功能需求，主要用于展示一系列图片或信息，以吸引用户的注意力并提供动态的视觉效果。这一技术通常应用于广告轮播、产品展示或者...
不间断循环滚动效果的实例代码(必看篇)
09-01
【不间断循环滚动效果的实例代码详解】 在网页设计中，我们常常会遇到需要实现文本或图像的不间断循环滚动效果，这种效果可以增加信息展示的吸引力，使得内容更加动态且易于吸引用户注意力。本文将深入解析如何使用...
JS实现图片无间断滚动代码汇总
10-25
总的来说，实现图片无间断滚动的关键在于理解JavaScript的DOM操作和事件处理机制，以及掌握如何通过定时器来实现连续的滚动动作。通过不断实践和优化，你可以创造出更加丰富和吸引人的图片滚动效果，提升网站的视觉...
js之图片轮播
Vison_的博客
12-09 114
css <style> .bigbox{ width: 800px; height: 400px; margin: 0 auto; position: relative; } .bigbox img{ width: 100%; height: 100%; } .btns{ position: abso...
循环输出图形_javascript
07-09
(循环输出图形_javascript)
循环输出图形10_javascript
07-09
(循环输出图形_javascript)
带左右箭头按钮的js循环滚动图片特效代码
01-22
兼容IE7+ IE6图片格式改下 带左右箭头按钮的js循环滚动图片特效代码
使用JavaScript实现点击循环切换图片效果
10-19
本文通过实例代码给大家介绍了通过js实现点击循环切换图片效果，需要的朋友参考下
js通过循环多张图片实现动画效果
10-15
主要为大家详细介绍了js通过循环多张图片实现动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现的图片依次循环播放
T的博客
10-25 7155
作者：cighao 来源：CSDN 原文：https://blog.csdn.net/cighao/article/details/49338903 &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;Banner Cycler&amp;lt;/title&amp;gt; &amp;lt;script&amp;gt; var
html用javascript循环显示图片
最新发布
weixin_58094032的博客
04-10 976
【代码】html用javascript循环显示图片。
JS实现图片循环滚动
Brave的博客
08-06 8313
之前在前端的时候有遇到这样一个问题，实现 JS 图片的循环滚动，然后鼠标移入的时候停止滚动，鼠标移开继续滚动，这里无非就是设置了一个定时器，鼠标移上时清除定时器达到滚动停止的目的，鼠标移开时重设定时器，代码如下： <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <title>JS实...
js实现无缝无限循环轮播图片
幼儿园老大的博客
06-18 5617
如果有问题或者更好的方法，欢迎留言 效果图如下： 具体代码见下面： <!DOCTYPE> <html> <head> <title>06</title> <meta charset="utf-8"> <script> window.onload = function () { var ul = ...
JavaScript中的while循环解析与应用
3. **安全性**：JavaScript不允许直接访问本地磁盘，防止了数据的非法操作。 4. **动态性**：JavaScript允许在运行时修改对象的属性和调用方法，提供了高度的灵活性。 5. **易用性**：JavaScript采用简单的脚本编程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值