js选项卡_关于js选项卡切换的小问题想请教各路大神

原问题：关于js选项卡切换的小问题想请教各路大神
分类：编程开发 > 最后更新时间：【2016-12-12 23:21:01】

问题补充：

<!doctype html>

<html>

<head>

<title>无标题文档</title>

*{margin:0;padding:0;}

ul{list-style:none;}

.clear{clear:both;}

.wrap{width:800px; margin-bottom:20px;}

.tap ul{height:40px;}

.tap ul .act{float:left; padding:0 20px; height:40px; line-height:40px; background:#F358F2;}

.tap li{float:left; padding:0 20px; height:40px; line-height:40px;}

.tap li a{color:#333; display:block;}

.wrap .chance{}

.wrap .chance div{border:2px solid #D4002E; width:800px; height:300px;}

.wrap .chance .a{display:none;}

</style>

</head>

<body>

<ul>

</ul>

</div>

</div>

<ul>

</ul>

</div>

</div>

</body>

</html>

function run(obj){

//找对象

var oUl=obj.getElementsByTagName('ul')[0];

var aLi=oUl.getElementsByTagName('li');

var aDiv=obj.getElementsByClassName('hider');

//绑事件,循环

for(var i=0;i<aLi.length;i++){

aLi[i].index=i//发牌照

aLi[i].onclick=function(){

for(var j=0;j<aLi.length;j++){

aLi[j].className='';//清空类名

aDiv[j].style.display='none';//隐藏

};

this.className='act';

aDiv[this.index].style.display='block';//显示

};

//----------------------

//自动播放

var n=0;//计数器

var timer=setInterval(function(){

n++;

if(n==aLi.length){

n=0;

};

for(var j=0;j<aLi.length;j++){

aLi[j].className='';//清空类名

aDiv[j].style.display='none';//隐藏

};

aLi[n].className='act';

aDiv[n].style.display='block';

},1000);

obj.onmouseover=function(){

clearInterval(timer);//清除计时器

};

obj.onmouseout=function(){

run(obj);//再运行

};

//----------------------------

var aWarp=document.getElementsByClassName('wrap');

run(aWarp[0]);

run(aWarp[1]);

</script>

//-------------------------------------------------------

我想请教，如果我想在js的function run的小括号那里再加上一个参数，比如加上一个autoran，然后在最后判断为true时让选项卡自动切换，否则就停止自动该怎么写？

最佳答案

javascript只要小小修改下就可以了，

function run(obj,autorun){

//找对象

var oUl=obj.getElementsByTagName('ul')[0];

var aLi=oUl.getElementsByTagName('li');

var aDiv=obj.getElementsByClassName('hider');

//绑事件,循环

for(var i=0;i<aLi.length;i++){

aLi[i].index=i//发牌照

aLi[i].onclick=function(){

for(var j=0;j<aLi.length;j++){

aLi[j].className='';//清空类名

aDiv[j].style.display='none';//隐藏

};

this.className='act';

aDiv[this.index].style.display='block';//显示

};

//----------------------

//是否自动切换

if(autorun){

var n=0;//计数器

var timer=setInterval(function(){

n++;

if(n==aLi.length){

n=0;

};

for(var j=0;j<aLi.length;j++){

aLi[j].className='';//清空类名

aDiv[j].style.display='none';//隐藏

};

aLi[n].className='act';

aDiv[n].style.display='block';

},1000);

obj.onmouseover=function(){

clearInterval(timer);//清除计时器

};

obj.onmouseout=function(){

run(obj);//再运行

};

//----------------------------

var aWarp=document.getElementsByClassName('wrap');

run(aWarp[0],true); //自动切换

run(aWarp[1],false); //不自动切换

</script>

追问：
我再问一个问题，你先看下面这段代码：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{margin:0;padding:0;}#box1{width:400px; height:252px; position:relative; margin:100px auto;}#box1 img{width:100%;}#box1 span{position:absolute; top:0; left:0; background:#DF4B4B; opacity:.5; width:100px; height:100px; cursor:move; display:none;}#box2{width:200px; height:200px; position:absolute; top:102px; left:500px; overflow:hidden; display:none}#box2 img{position:absolute;}</style></head><body><div id="box1"><img src="image/pic.jpg"> <span></span></div><div id="box2"><img src="image/pic.jpg"></div></body></html><script>var oBox1=document.getElementById("box1");var oSpan=oBox1.getElementsByTagName("span")[0];var oImg=document.getElementsByTagName("img")[1];var oBox2=document.getElementById("box2");oBox1.onmousemove=function(ev){ev=ev||window.event;//显示oBox2.style.display="block";oSpan.style.display="block";var l=ev.clientX-oBox1.offsetLeft-oSpan.offsetWidth/2;var t=ev.clientY-oBox1.offsetTop-oSpan.offsetHeight/2;if(l<0){l=0;};if(t<0){t=0;};if(l>oBox1.offsetWidth-oSpan.offsetWidth){l=oBox1.offsetWidth-oSpan.offsetWidth};if(t>oBox1.offsetHeight-oSpan.offsetHeight){t=oBox1.offsetHeight-oSpan.offsetHeight};oSpan.style.left=l+"px";oSpan.style.top=t+"px";//计算比率var rateY=t/-(oBox1.offsetHeight-oSpan.offsetHeight);var rateX=l/-(oBox1.offsetWidth-oSpan.offsetWidth);oImg.style.top=(oImg.offsetHeight-oBox2.offsetHeight)*rateY+"px";oImg.style.left=(oImg.offsetWidth-oBox2.offsetWidth)*rateX+"px";//隐藏oBox1.onmouseout=function(){oBox2.style.display="none";oSpan.style.display="none";};};</script>现在图片的放大区域是在外面的，如果想让图片的放大区域在图片内部，鼠标移到哪里放大区域就跟到哪里该怎么改这段代码

追答：
这样改就可以了，加上//***下面的两行代码，()中的值你可以根据自己设置<script>window.onload = function(){var oBox1=document.getElementById("box1");var oSpan=oBox1.getElementsByTagName("span")[0];var oImg=document.getElementsByTagName("img")[1];var oBox2=document.getElementById("box2");oBox1.onmousemove=function(ev){ev=ev||window.event;//显示oBox2.style.display="block";oSpan.style.display="block";var l=ev.clientX-oBox1.offsetLeft-oSpan.offsetWidth/2;var t=ev.clientY-oBox1.offsetTop-oSpan.offsetHeight/2;if(l<0){l=0;};if(t<0){t=0;};if(l>oBox1.offsetWidth-oSpan.offsetWidth){l=oBox1.offsetWidth-oSpan.offsetWidth};if(t>oBox1.offsetHeight-oSpan.offsetHeight){t=oBox1.offsetHeight-oSpan.offsetHeight};oSpan.style.left=l+"px";oSpan.style.top=t+"px";//***放大区也跟着鼠标移动 ()中你可以自己调整位置， oBox2.style.top = (102)+t+"px"; oBox2.style.left= (600)+l+"px";//计算比率var rateY=t/-(oBox1.offsetHeight-oSpan.offsetHeight);var rateX=l/-(oBox1.offsetWidth-oSpan.offsetWidth);oImg.style.top=(oImg.offsetHeight-oBox2.offsetHeight)*rateY+"px";oImg.style.left=(oImg.offsetWidth-oBox2.offsetWidth)*rateX+"px";//隐藏oBox1.onmouseout=function(){oBox2.style.display="none";oSpan.style.display="none";};};};</script>

最佳答案由网友 杨柳Y雨雪 提供

公告：为响应国家净网行动，部分内容已经删除，感谢网友理解。

其他回答

暂无其它回答!