js中关于导航切换效果-之二(使用定时器自动切换)

最新推荐文章于 2024-03-08 18:06:53 发布
最新推荐文章于 2024-03-08 18:06:53 发布
阅读量770 收藏 2
点赞数
分类专栏： 编程之路 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21935367/article/details/50437882
版权
<!doctype html>
<html lang="'en">
<head>
<meta charset="UTF-8">
<title>Tab切换-自动</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript">
/*
  要求：1:完成鼠标移上导航切换选项卡的效果(上下文字一起改变);
        2:使用定时器完成自动切换的效果
*/


     window.onload = function(){
      var timer = null;
      var num = 0;
      var tit = document.getElementById('notice-tit');
      var lis = tit.getElementsByTagName('li');
      var con = document.getElementById('notice-con');
      var divs = con.getElementsByTagName('div');
      timer = setInterval(autoplay,3000);
      for(var i=0;i<lis.length;i++){
       lis[i].id = i;
       lis[i].onmouseover = function(){
        clearInterval(timer);
        changTab(this.id);
       }
       lis[i].onmouseout = function(){
        timer = setInterval(autoplay,3000);//设置3秒钟自动切换
       }
      }
      
       function autoplay(){
         num++;
         if(num>=lis.length){
          num = 0;
         }
         changTab(num);
       }


      function changTab(curnum){
      for(var j=0;j<lis.length;j++){
        lis[j].className = "";
        divs[j].style.display = "none";
        }
            lis[curnum].className = "select";
            divs[curnum].style.display = "block";
            num = curnum;
      }
    }
</script>
</head>
<body>
<div id="notice" class="notice">
<div id="notice-tit" class="notice-tit">
 <ul>
  <li class="select">
  <a href="#">公告</a>
  </li>
  <li >
  <a href="#">规则</a>
  </li>
  <li >
  <a href="#">论坛</a>
  </li>
  <li>
  <a href="#">安全</a>
  </li>
  <li >
  <a href="#">公益</a>
  </li>
 </ul>
</div>
<div id="notice-con" class="notice-con">
<div class="mod" style="display:block">
<ul>
<li>
<a href="#">   张勇：要玩快乐足球</a>
</li>
 <li>
<a href="#"> 阿里2000万驰援灾区！</a>
</li>
<li>
<a href="#"> 旅游宝让你边玩边赚钱</a>
</li>

<li>

<a href="#"> 多行跟进阿里信用贷款</a>

</li>
</ul>
</div>
            <div class="mod" style="display:none">
<ul>
<li>
<span><a href="#">通知</a></span>
<a href="#">滥发"即将换新</a>
</li>
 <li>
<span>   <a href="#">通知</a></span>
<a href="#">比特币严管啦！</a>
</li>
<li>
<span>   <a href="#">通知</a></span>
<a href="#"> 禁发商品名录！</a>
</li>
<li>
<span>
[
                              <a href="#">通知</a>
]
</span>
<a href="#">
                          商品属性限制
</a>
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>
<span><a href="#">聚焦</a></span>
<a href="#"> 金牌卖家再启航</a>
</li>
<li>
<span>   <a href="#">功能</a></span>
<a href="#">   橱窗规则升级啦</a>
</li>
<li>
<span>   <a href="#">话题</a></span>
<a href="#">     又爱又恨优惠劵 </a>
</li>
  <li>
<span>  <a href="#">工具</a></span>
<a href="#"> 购后送店铺红</a>
</li>
</ul>
</div>
            <div class="mod" style="display:none">
<ul>
<li>
<a href="#"> 个人重要信息要管牢！</a>
</li>
 <li>
<a href="#">    卖家防范红包欺诈提醒</a>
</li>
<li>
<a href="#">     更换收货地址的陷阱！</a>

</li>

 <li>   

  <a href="#">  注意骗子的技术升级了！</a>

</li>
</ul>
</div>
            <div class="mod" style="display:none">
<ul>
<li>
<a href="#"> 走进无声课堂</a>
</li>
  <li>
<a href="#">    淘宝之行大众评审赢公益金</a>
</li>
<li>
<a href="#">   爱心品牌联合征集</a>
</li>
               <li>
                        <a href="#"> 名公益机构淘宝开店攻略</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
林子夕
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 用定时器定时切换两张图
weixin_49775582的博客
08-04 1016
html: <div> <img id="image" src="图片路径" width="500px" height="300px" /> </div> js: var n=0; //初始图片下标 var arr=new Array(); //定义数组 var arr[0]="图片路径"; // 第一张图片 var arr[1]="图片路径"; // 第二张图片 //设置定时器,2秒切换一次 setInterval(function(){ var i
js中关于导航切换效果-之一(鼠标移动)
林子夕的博客
12-30 604
js中关于导航切换效果-之一(鼠标移动)
使用js实现导航切换效果变化（收集案例）
dianyingba2258的博客
09-10 266
<!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> ...
用定时器自动切换
weixin_30256901的博客
04-07 294
var n=0; function changeImg(){ if(n<2){ n=n+1; }else{ n=0; } $(".model li").slideUp("slow"); $(".model li").eq(n).slideDown("slow"); $(".button li a").removeClass("currentA"); $(".button ...
js--用一个定时器动态改变title内容
weixin_45664416的博客
04-21 304
js--用一个定时器动态改变title内容 let arr1 = ["你好,欢迎你", "(●ˇ∀ˇ●)", "(　o=^•ェ•)o　┏━┓", "ε=ε=ε=(~￣▽￣)~", "(。・∀・)ノ" ] //调用 shu(arr1,200) function shu([arr],speed) { let ind = 0; let ass = ""; let ss = [...arr1[ind]][Symbol.iterator](); let time = se.
js图片自动切换效果处理代码
10-27
本文将深入解析如何使用 JavaScript 实现图片自动切换效果，包括代码实现、核心原理以及自定义配置。 首先，让我们来看一下给出的代码片段。这段代码主要包含两个部分：JavaScript 和 HTML。JavaScript 部分用于...
javascript 定时自动切换的选项卡Tab
01-19
这里要注意,用于产生changeTabInterval的随机数，防止页面上TabPane过多，如果设置的changeTabInterval都一样的话会产生整齐划一的切换的效果，不美观. 自动切换Tab选项卡 .tab { font-family: Verdana, Helvetica...
JS图片banner自动切换效果代码
01-23
JS（JavaScript）图片Banner自动切换效果代码则是实现这一功能的核心技术。本文将深入探讨如何利用JavaScript来创建一个动态、吸引人的图片轮播效果。 首先，我们需要理解JavaScript的基本概念。JavaScript是一种轻...
js实现图片自动切换效果
03-09
总结起来，使用JavaScript实现图片自动切换效果涉及以下知识点： 1. HTML结构设计：创建图片容器和图片元素。 2. JavaScript操作DOM：获取图片元素，设置初始显示状态，定时切换图片。 3. CSS样式控制：通过`display...
js实现轮播图效果 纯js实现图片自动切换
10-14
在这个实例中，我们将详细探讨如何使用纯JavaScript实现一个功能完备的轮播图，包括图片自动切换、鼠标悬停暂停、鼠标离开恢复播放以及点击导航小圆圈切换图片。 首先，我们需要在HTML中设置基本结构。创建一个包含...
js图片切换特效
03-19
NULL 博文链接：https://kinyum-li.iteye.com/blog/718772
JavaScript有关定时器的使用方法
Game Kingdom的博客
12-30 348
JavaScript有关定时器的使用方法 JavaScript中的定时器是一个非常有意思的一个功能，它能每隔你设定 的时间执行一段代码，比如每隔6秒页面弹出一个提示框、还有像一些比较常见 的网站都有每隔几秒切换一张图片等等，这都是定时器的功劳，是不是觉得很 有意思呢？接下来我带大家来感受一下定时器的魅力！ JavaScript中的定时器有两种都是非常实用的，第一种是延...
JS——定时器切换选项卡，加事件监听
qq_43503450的博客
09-04 323
JS——定时器切换选项卡，加事件监听
javascript基础学习系列三百零六：自动切换
最新发布
m0_68635815的博客
03-08 613
AJavaScript 可以通过很多方式来增强表单字段的易用性。最常用的是在当前字段完成时自动切换到 下一个字段。对于要收集数据的长度已知(比如电话号码)的字段是可以这样处理的。在美国，电话号 码通常分为 3 个部分:区号、交换局号，外加 4 位数字。为增加这个表单的易用性并加速数据输入，可以在每个文本框输入到最大允许字符数时自动把焦点 切换到下一个文本框。因此，当用户在第一个文本框中输入 3 个字符后，就把焦点移到第二个文本框， 21 当用户在第二个文本框中输入 3 个字符后，把焦点再移到第三个文本框。
Js实战之实现图片的自动切换
weixin_44278828的博客
10-18 1230
实现图片的自动切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实现图片的定时转换</title> <script type="text/javascript"> /** * 实现图片的自动切换 */ window.onload = function ()
二种方法js实现轮播图自动切换
m0_48541096的博客
05-24 4182
先看效果图 第一种 //点击按钮，序号变化 showIdx++; if (showIdx == imgArr.length) { showIdx = 0; } //所有盒子左移动 for (let i = 0; i <items.length; i++) { items[i]..
一段非常简单的让图片自动切换js代码
weixin_34008933的博客
11-06 386
 1&lt;script language =javascript &gt; 2var curIndex=0; 3//时间间隔 单位毫秒 4var timeInterval=1000; 5var arr=new Array(); 6arr[0]="1.jpg"; 7arr[1]="2.jpg"; 8arr[2]="3.jpg"; 9arr[3]="4.jpg";10arr[4]="5.jpg"
HTML+CSS+JS做出图片自动切换效果
热门推荐
weixin_43784536的博客
11-28 2万+
HTML+CSS+JS，图片自动切换、鼠标移动触发切换效果（onmouseover获得当前元素id方法） 大学新手一枚，乱七八糟学了好多又忘了好多，以后要慢慢一点点记下来。 ================================================================ 效果图 文件结构： 素材文件夹里面都是所需的图片 鼠标触碰切换按钮图片，长宽都P成20px...
js实现图片自动切换
yanner_的博客
10-31 2282
说明：通过计时器使得图片每间隔几秒可以自动切换，也可以通过鼠标的点击控制播放的图片。 html代码：<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>图片自动切换</title> <link rel="stylesheet" type="t
添加定时器为饼图1s切换一个hover效果
05-24
要实现饼图1秒钟切换一个hover效果，您需要使用JavaScript中的定时器功能和CSS中的:hover伪类。下面是一些简单的步骤： 1. 在CSS中定义hover效果，例如： ``` .pie-chart:hover { transform: scale(1.1); } ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值