js: 文字定时切换

最新推荐文章于 2023-10-01 12:24:04 发布
原创 最新推荐文章于 2023-10-01 12:24:04 发布 · 5.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#function #transition #javascript #table #html #filter

本文展示了一段JavaScript代码，用于实现文字的定时切换效果。通过HTML和JavaScript结合，利用`FILTER: revealTrans`实现过渡动画，创建了一个不断更换内容的DIV元素。代码中定义了多个文字数组`imgTitle`，并通过`nextAd()`函数实现在指定间隔时间后自动切换文字内容。当鼠标悬停在元素上时，切换会暂停，离开后继续。
下面的代码实现文字（图片同理）的切换显示：
<!-- gavin_sw.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0020)http://riji.163.com/ -->
<HTML>
<HEAD>
<TITLE>gavin_sw</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gbk">
</HEAD>

<BODY bgcolor="#000000">
<TABLE cellSpacing=0 cellPadding=0 align=center border=0>
        <TR>
          <TD vAlign=top bgColor=#fdfdf8>
            <SCRIPT src="notice.js"></SCRIPT>
            <DIV id=imgInit onmouseover=stopTimer(); 
                        style="FILTER: revealTrans(duration=2, transition=3);  WIDTH: 154px; POSITION: absolute; HEIGHT: 160px; background-color:#FFFFFF" 
                        onmouseout=startTimer()></DIV>
            <SCRIPT language=JavaScript>...
                var imgTitle=new Array();
                imgTitle[1]="<br>aaaaaaaaaaaa__11<br><br>aaaaaaaaaaaa__22<br><br>aaaaaaaaaaaa__33<br>";
                imgTitle[2]="<br>bbbbbbbbbbbb__11<br><br>bbbbbbbbbbbb__22<br><br>bbbbbbbbbbbb__33<br>";
                imgTitle[3]="<br>cccccccccccc__11<br><br>cccccccccccc__22<br><br>cccccccccccc__33<br>";
                imgTitle[4]="<br>dddddddddddd__11<br><br>dddddddddddd__22<br><br>dddddddddddd__33<br>";
                nextAd(imgTitle.length);
            </SCRIPT>
          </TD>
        </TR>
</TABLE>
</BODY>
</HTML>

//------------------    notice.js   ------------------
var adNum=0;
var timerID = 4000;
function playTran(){
    imgInit.filters.revealTrans.play();
}

function nextAd(){        
    if(adNum >= j){
        adNum=1;
    }
    if(adNum != 0){
        imgInit.filters.revealTrans.Transition=20;
        imgInit.filters.revealTrans.apply();
        imgInit.innerHTML=imgTitle[adNum];
        playTran();
    }
    adNum++;

    theTimer=setTimeout("nextAd()", timerID);
}
        
function stopTimer() {
   window.clearTimeout(theTimer);
}
            
function startTimer() {
   theTimer=setTimeout("nextAd()", timerID);
}
JS、CSS文字切换，定时交替，代码精简
12-09
你可以把它看作像写一般的CSS列表一样，只用增加两三行代码就能完成切换效果。 文本定时变动代码 #newslist{ background:#f8f8f8;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:288px; } #contain{ font-size:12px;overflow:hidden;list-style:none;width:288px;height:20px;margin:0px;padding:0; } #contain li{ height:22px;line-heig
JS实现自动切换文字的导航效果代码
10-23
主要介绍了JS实现自动切换文字的导航效果代码,涉及javascript动态切换页面样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
html自动切换文字,JS实现自动切换文字的导航效果代码
weixin_42511887的博客
05-31 1566
本文实例讲述了JS实现自动切换文字的导航效果代码。分享给大家供大家参考。具体如下：这里介绍支持自动切换文字的导航菜单效果，实际上看上去并不像菜单，猛一看倒像是一个Select下拉框，两侧带有箭头控制按钮，点击左侧则向上切换菜单文字，点击右侧则切换到一个菜单项内容，也可自动切换，鼠标不点击的时候菜单会自动变化文字。运行效果截图如下：在线演示地址如下：具体代码如下：变化的文字导航条变化的文字导航条.s...
JS实现的文字与图片定时切换效果代码
10-23
主要介绍了JS实现的文字与图片定时切换效果代码,可实现定时切换及鼠标点击切换两种效果,涉及JavaScript鼠标事件控制页面样式的相关技巧,需要的朋友可以参考下
精选资源
JS文字切换动画特效代码
03-20
在本案例中，“JS文字切换动画特效代码”指的是使用JavaScript来实现文字内容在网页上动态地、有动画效果地进行切换，以提升用户体验和视觉吸引力。 实现文字切换动画特效，一般会用到以下几个关键知识点： 1. **...
jQuery实现内容定时切换效果完整实例
10-22
本文内容主要讲解了如何利用jQuery实现内容的定时切换效果，详细介绍了通过JavaScript和jQuery的时间函数来控制网页内容定时显示和隐藏的技巧。为了让读者能够更好地理解和实现这一效果，文章给出了一个完整的实例，...
JavaScript实现文字切换效果
2301_79326559的博客
10-01 471
文字切换效果是网页设计中常见的交互效果之一，通过动态改变文字内容，给用户带来更丰富的视觉体验。首先，我们需要在HTML中创建一个包含要切换的文字的容器。在每个时间间隔内，我们将更新文字容器的内容为下一个文字选项，并更新当前索引。接下来，我们需要定义一个包含要切换的文字内容的数组。接下来，我们可以为文字容器设置一些基本的样式，以使其显示在页面上的合适位置。现在，当你在浏览器中查看页面时，你将会看到文字容器中的文字每2秒切换一次。然后，我们需要定义一个变量来跟踪当前显示的文字选项的索引。
让网页文字定时交替出现的Js代码
weixin_34049948的博客
08-12 815
让LI列表中的文字一行一行交替出现，每一行停留数秒后自动转到下一行显示，使用灵活，JS代码非常精简，推荐学习参考和使用。这里给LI设置line-height属性以便控制内容溢出。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD> <T...
js定时器切换图片
Czc1357618897的博客
06-10 1317
js定时器切换图片
JavaScript实现自动跳转文本功能
10-19
主要为大家详细介绍了JavaScript自动跳转文本功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS文字切换动画.zip
07-04
JS文字切换动画是一款文字自动切换特效
js实现简单选项卡与自动切换效果的方法
12-09
本文实例讲述了js实现简单选项卡与自动切换效果的方法。分享给大家供大家参考。具体分析如下： 这里再上篇《js实现简单的可切换选项卡效果》基础上，进一步实现可以自动切换的切换效果，用这种效果就可以做简单的焦点图了。 说明： 设置一个标识数字置为0，写一个每过几秒标识+1,执行切换效果的函数，然后执行。 当标识超过当前选项卡长度让标识置为0。 在鼠标移到选项卡的时候关闭定时器，鼠标移走的时候打开定时器。 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> body,ul,li{
JavaScript实现定时自动切换的选项卡导航菜单
CgbAutoit的博客
09-23 201
选项卡导航菜单是网页中常见的交互元素，它可以让用户切换不同的内容，提供更好的用户体验。通过上述的HTML、CSS和JavaScript代码，我们可以实现一个定时自动切换的选项卡导航菜单。用户可以在页面上看到选项卡和对应的内容，并且选项卡会定时自动切换，提供更好的用户体验。该函数首先移除当前活动选项卡和内容的活动状态，然后更新当前活动选项卡的索引，最后添加新的活动状态到选项卡和内容。每个选项卡都有一个对应的内容，初始时第一个选项卡和对应的内容都被设置为活动状态。函数，用于设置定时切换选项卡的功能。
js自动切换
weixin_47723644的博客
09-17 575
display 思路：先将所有的图片设置为display：none,再设置一个值从0开始，将对应的图片设置display:block，当值大于图片个数时，将值重新设为0. 这种方法比较容易理解，同时更容易编写，不需要计算偏移量，但是无法出现切换的过程（transition） animation 这种方法只需要用到css中的animation属性，比较简洁，但是需要提前将图片拼起来，并且也要计算偏移量 js偏移 思路：将图片并排或并列排放，设置position属性，并计算好每次的偏移量，让它的偏移量到达一定
Javascript特效之选项卡定时自动切换
a271720559的博客
06-22 2020
Javascript特效之选项卡卡定时自动切换我们经常看到一些广告是tab页形式的，而且会自动切换，今天我们来看看是怎么实现的。效果图：每过一秒会自动切换一个tab页。实现思路：写一个定时器每一秒执行一次，并判断当前tab页的下标来显示对应的tab页。对其他tab则设置display：none。js代码：function sh(){ s=(s&gt;=5)?1:s+1 for (var i=1...
JS——定时器切换选项卡，加事件监听
qq_43503450的博客
09-04 411
JS——定时器切换选项卡，加事件监听
Js文字公告切换代码
weixin_30418341的博客
10-18 241
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>广告文字-亿诚</title></head><body bgcolor="#fef4d9" onLoad="play_rt()"><...
html文字自动切换自然,html5 canvas文字变换切换特效
weixin_30119911的博客
05-31 500
js代码var isDesktop = navigator['userAgent'].match(/(ipad|iphone|ipod|android|windows phone)/i) ? false : true;var fontunit = isDesktop ? 20 : ((window.innerWidth>window.innerHeight?window.inn...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值