html图片滚动首尾互联,网页中多个图片首尾相接来回滚动

网页中多个图片首尾相接来回滚动这个功能用JavaScript来实现的。

下面是页面中的显示代码：

border=0 cellspace="0">

vAlign=top>

height="116" border="0" cellpadding="0"

cellspacing="0">

background="beijin3.gif">

align="center">1

background="beijin3.gif">

align="center">

background="beijin3.gif">

align="center">3

background="beijin3.gif">

align="center">4

background="beijin3.gif">

align="center">5

background="beijin3.gif">

align="center">6

background="beijin3.gif">

align="center">7

background="beijin3.gif">

align="center">8

background="beijin3.gif">

align="center">9

background="beijin3.gif">

align="center">10

vAlign=top>

这是JavaScript的控制代码：

var speed3=25//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

var MyMar=setInterval(Marquee,speed3)

demo.οnmοuseοver=function() {clearInterval(MyMar)}

demo.οnmοuseοut=function()

{MyMar=setInterval(Marquee,speed3)}

页面具体例子显示：

http://hi.baidu.com/wibmj

td {font-size: 12px;}

cellPadding=0 width=750 align=center border=0>

border=0 cellspace="0">

vAlign=top>

height="116" border="0" cellpadding="0"

cellspacing="0">

background="beijin3.gif">

align="center">1

background="beijin3.gif">

align="center">

background="beijin3.gif">

align="center">3

background="beijin3.gif">

align="center">4

background="beijin3.gif">

align="center">5

background="beijin3.gif">

align="center">6

background="beijin3.gif">

align="center">7

background="beijin3.gif">

align="center">8

background="beijin3.gif">

align="center">9

background="beijin3.gif">

align="center">10

vAlign=top>

var speed3=25//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

var MyMar=setInterval(Marquee,speed3)

demo.οnmοuseοver=function() {clearInterval(MyMar)}

demo.οnmοuseοut=function()

{MyMar=setInterval(Marquee,speed3)}

html图片滚动首尾互联,网页中多个图片首尾相接来回滚动相关推荐

html语言设置网页背景,HTML+CSS入门设置网页中的背景图片的5个属性
本篇教程介绍了HTML+CSS入门设置网页中的背景图片的5个属性,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 在css代码中设置背景图片的方法,包括背景图片.背景重复 ...
一键获取网页中的全部图片并批量下载（国内淘宝天猫京东网站+国外商品页面）——亲测有效
上周六的时候,有个朋友找到我,需要将网页中的图片全部下载下来,而且还不能改变图片的大小: 作为一个前端,经常跟html打交道,我深知页面中肯定是有图片链接的网页中下载少量图片的方法举例说明网页中图 ...
Deep Zoom 让高清图片在你的网页中飞起来
很多站长和博主都有关于高清图片怎么放在页面上的困惑. 图片文件太大了, 加载时间就会很长,我相信没人愿意为了看一张图片要等个10几秒钟. 就算页面不需要用户的等待, 一大块空白的区域, 用户体验也就好 ...
html怎么写入图片位置,如何在css中设置插入图片定位
在做网页开发时,客户给的素材图片通常都是连在一起的,这样做也是为了缩短响应时间.下面就给大家具体说一下 ,如何通过css属性来定位图片. 如何在css中设置插入图片定位首先设置固定图片的css属性是 ...
Android --- 夜神模拟器中没有图片怎么办？夜神模拟器中怎么导入图片？
问题: 夜神模拟器中没有图片怎么办?夜神模拟器中怎么导入图片? 解决: 1.点击右侧文件助手 2.点击"打开电脑文件夹" 3.弹出如下文件夹 4.点击imageShare 5.点击 ...
【Latex】【插入图片】如何在latex中插入并列图片
[Latex][插入图片]如何在latex中插入并列图片实验分析部分需要将多个图片并列展示,今天看了网友的一些提示,写出了两种并列展示图片的方法: 每个图片都有一个标题多个图片共用一个标题,每个图 ...
网页中漂浮的图片代码
这是网页中一个漂浮的图片代码,有兴趣者可下载. 转载于:https://blog.51cto.com/51ctogreat/199644
python获取网页图片_python抓取网页中的图片示例
python抓取网页中的图片示例代码如下: #coding:utf8 import re import urllib def getHTML(url): page = urllib.urlopen( ...
网页中的png图片无法显示？
弄了2天的一个问题,晕啊~~~~~~~~~~~~~~~终于找到原因了.有一个网页是通过URL地址显示在框架中的,在本地打开的时候是正常的,不过从IE7打开会有一个安全提示,点允许执行页面中的png图片 ...

html图片滚动首尾互联,网页中多个图片首尾相接来回滚动

html图片滚动首尾互联,网页中多个图片首尾相接来回滚动相关推荐

最新文章

热门文章