如何用html实现文本+图片轮流滚动显示 50
文本1：123456 文本2：654321 文本3：45352
图片1 图片2 图片3
文本跟对应的图片是一套东西，需要一起显示，然后这3套循环滚动显示。 展开
就是无缝滚动
用js就可以
1、打开Dreamweaver软件
2、代码如下： 不要忘了引入js库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js无缝滚动制作js文字无缝滚动和js图片无缝滚动</title>
<meta name="description" content="js无缝滚动制作多种无缝滚动效果js文字无缝滚动和js图片无缝滚动,直接复制副本标签js无缝滚动代码。内含js代码下载。" />
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;font-size:12px;}
a,img{border:0;}
.scroll{height:300px;width:500px;margin:50px auto;border:solid 1px #ddd;}
.scroll p{line-height:28px;padding:5px 0;border-bottom:dashed 1px #ddd;text-align:center;}
.scroll p a{color:#3366cc;text-decoration:none;}
</style>
<script type="text/javascript">
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
addEventSimple(window,'load',initScrolling);
var scrollingBox;
var scrollingInterval;
var reachedBottom=false;
var bottom;
function initScrolling(){
scrollingBox = document.getElementById('xst');
scrollingBox.style.overflow = "hidden";
scrollingInterval = setInterval("scrolling()",50);
scrollingBox.onmouseover = over;
scrollingBox.onmouseout = out;
}
function scrolling(){
var origin = scrollingBox.scrollTop++;
if(origin == scrollingBox.scrollTop){
if(!reachedBottom){
scrollingBox.innerHTML+=scrollingBox.innerHTML;
reachedBottom=true;
bottom=origin;
}else{
scrollingBox.scrollTop=bottom;
}
}
}
function over(){
clearInterval(scrollingInterval);
}
function out(){
scrollingInterval = setInterval("scrolling()",50);
}
</script>
<div class="scroll" id="xst">
<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动</a></p>
<p><img width="150" height="150" alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动" src="images/1.jpg" /></p>
<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示</a></p>
<p><img width="150" height="150" alt="js文字滚动制作js scroll单排文字滚动向上间隔滚动" src="images/2.jpg" /></p>
<p><a href="http://www.17sucai.com/" target="_blank">jquery 文字特效霓虹灯文字效果使用jQuery和CSS</a></p>
<p><img width="150" height="150" alt="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示" src="images/3.jpg" /></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字滚动制作js scroll单排文字滚动向上间隔滚动</a></p>
<p><img width="150" height="150" alt="jquery 文字特效霓虹灯文字效果使用jQuery和CSS" src="images/4.jpg" /></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></p>
<p><a href="http://www.17sucai.com/" target="_blank">js文字滚动插件制作双行关联向上文字间隙滚动</a></p>
</div>
</body>
效果：
注释：
1) scrollAmount。它表示速度，值越大速度越快。
2) 加入onmouseover=stop() onmouseout=start()代码，鼠标指向循环文字图片时他们会停止滚动，鼠标离开时继续滚动。
给滚动图片加超链接
用<a href=>和</a>把<img>包围，并且img必须设border=0，否则图片会出现边框。例子如下：
<MARQUEE scrollAmount=3 loop=infinite deplay="0"><a href="链接网址"><img src="图片网址" border=0></a></MARQUEE>
图片从右到左滚动
<MARQUEE width=宽 height=高 onmouseover=stop() onmouseout=start() scrollAmount=速度 loop=infinite deplay="0"><img src="图片地址 "><img src="图片地址 ">···</MARQUEE>
图片从下到上滚动
<marquee behavior="scroll" direction=up width="宽" height="高" scrollamount="5" onmouseout="this.start()"><img src="图片网址 "><img src="图片网址 ">···</marquee>
带有超链接的图片实现滚动效果
<marquee behavior="scroll" direction=up width="120" height="60" scrollamount="1" scrolldelay="60" onmouseover="this.stop()" onmouseout="this.start()"><a target="cont" href="连接地址"><img src="http://图片地址" idth="88" height="33" border="0"></a><a target="cont" href="连接地址"><img src="图片地址" width="88" height="33" border="0"></a></marquee>
给图片或文字加边框
双线：<div style="border:3px double #ffffff;">文字</div>
虚线：<div style="border:1px dashed #ffffff;">文字</div>
实线：<div style="border:1px solid #ffffff;">文字</div>
外凸：<div style="border-style:outset; border-width:1px;">图片或文字</div>
火焰文字：<div style="FILTER: glow(color=#ff6600,strength=6); COLOR: #000000; HEIGHT: 10px"><font size="5">文字</font></div>
你要的代码
|
广告 您可能关注的内容 |
