本文实例为大家分享了js自动轮换选项卡的具体代码,供大家参考,具体内容如下
效果图:
代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{padding:0;margin:0;} ul{list-style:none;} #content{width:300px;height:200px;margin:150px auto;border:10px solid #ccc;padding:10px;} #top{width:300px;height:50px;background:#ccc;} #top a{height:50px;line-height:50px;font-size:20px;text-decoration:none;color:#000;display:inline-block;padding:0 10px;} #top a.active{background:yellow;} #main{width:300px;height:150px;background:#f1f1f1;} #main img{width:200px;height:150px;} #main ul{width:100px;height:150px;display:inline-block;float:right;} #main ul li{width:100px;height:50px;background:#f1f1f1;border-bottom:1px dotted #000;line-height:50px;text-align:center;} #main ul li.active{background:blue;} </style> <script> window.onload = function () { var content = document.getElementById('content'); var top = document.getElementById('top'); var aA = top.getElementsByTagName('a'); var main = document.getElementById('main'); var img = main.getElementsByTagName('img')[0]; var aLi = main.getElementsByTagName('li'); var arr = [ { title : '动漫', subtitle : ['波波鸟','白魔女','小龙女'], pics : ['img/1.png','img/2.png','img/3.png'], }, { title : '购物', subtitle : ['头盔','雪橇','内衣'], pics : ['img/4.png','img/5.png','img/6.png'], } ]; var row = 0, col = 0; var timer = null; for ( var i = 0; i < arr.length; i++ ) { aA[i].innerHTML = arr[i].title; aA[i].index = i; aA[i].onmouseover = function () { tab(this.index); } } tab(0); content.onmouseover = function () { for ( var i = 0; i < aA.length; i++ ) { if (aA[i].className === 'active') { row = i; break; } } for ( var i = 0; i < aLi.length; i++ ) { if (aLi[i].className === 'active'){ col = i; break; } } clearInterval(timer); } content.onmouseout = autoPlay; // 自动播放 function autoPlay() { clearInterval(timer); timer = setInterval(function () { // 子标题++,逢子标题长度, // 并且主标题加1, // 当子标题和主标题当前inded=长度时,归0 col++; if(col === aLi.length) row++; row %= aA.length; col %= aLi.length; for ( var i = 0; i < aLi.length; i ++ ) { aLi[i].className = ''; } aLi[col].className = 'active'; img.src = arr[row].pics[col]; for ( var i = 0; i < aLi.length; i++ ) { aLi[i].innerHTML = arr[row].subtitle[i]; } for ( var i = 0; i < aA.length; i ++ ) { aA[i].className = ''; } aA[row].className = 'active'; }, 2000); } autoPlay(); function tab(index) { for ( var i = 0; i < aA.length; i++ ){ aA[i].className = ''; } aA[index].className = 'active'; for ( var j = 0; j < arr[index].subtitle.length; j++ ) { aLi[j].innerHTML = arr[index].subtitle[j]; aLi[j].index = j; aLi[j].onmouseover = function () { for ( var i = 0; i < aLi.length; i ++ ) { aLi[i].className = ''; } this.className = 'active'; img.src = arr[index].pics[this.index]; } } img.src = arr[index].pics[0]; for ( var i = 0; i < aLi.length; i++ ){ aLi[i].className = ''; } aLi[0].className = 'active'; } } </script> </head> <body> <div id="content"> <div id="top"> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> <div id="main"> <img/> <ul> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍js实现简单选项卡与自动切换效果的方法,包括了js实现简单选项卡与自动切换效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现简单选项卡与自动切换效果的方法。分享给大家供大家参考。具体分析如下: 这里再上篇《js实现简单的可切换选项卡效果》基础上,进一步实现可以自动切换的切换效果,用这种效果就可以做简单的焦点图了。 说明: 设置一个标识数字置为0,写一个每过几秒
本文向大家介绍js实现tab选项卡切换功能,包括了js实现tab选项卡切换功能的使用技巧和注意事项,需要的朋友参考一下 话不多说,请看代码: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!
本文向大家介绍JS实现自动定时切换的简洁网页选项卡效果,包括了JS实现自动定时切换的简洁网页选项卡效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现自动定时切换的简洁网页选项卡效果。分享给大家供大家参考。具体如下: 这是一款简洁人网页选项卡,与其它TAB不同的是,本选项卡是自动切换的,在变量里设定选项卡的内容、切换时间等,它就开始工作了,如果可以响应鼠标的动作就更完美了。 运行效
本文向大家介绍js实现自动播放匀速轮播图,包括了js实现自动播放匀速轮播图的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现自动播放匀速轮播图的具体代码,供大家参考,具体内容如下 函数封装: ( 匀速运动函数) 对象可以动态生成属性,用对象的timer,避免了全局变量的使用, 实现步骤: 1.动态生成ol导航条,并将导航条放入all中使其成为孩子节点 2.根据ul中图片数量
本文向大家介绍js滚轮事件 js自定义滚动条的实现,包括了js滚轮事件 js自定义滚动条的实现的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js自定义滚动条的实现的具体代码,供大家参考,具体内容如下 描述: 自定义滚动条的实现 效果: 实现: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍js选项卡的实现方法,包括了js选项卡的实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js选项卡的实现方法。分享给大家供大家参考。具体分析如下: 一、思路 1. 获取元素; 2. for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件; 3. 点击当前按钮时会以高亮状态显示,通过for循环历遍把所有的按钮样式设置为空在把所有div的d