信鸽网

JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行）

  作者：bea

效果图如下所示： 废话不多说了，直接给大家贴js代码了. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>table切换</title><style type="text/css">*{padding: }button{width: 95px;}.active {background-color: yel

效果图如下所示：



废话不多说了，直接给大家贴js代码了.






<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>table切换</title>

<style type="text/css">

*{

padding: 

}

button{

width: 95px;

}

.active {

background-color: yellow;

}

#wrap{

width:510px;

overflow: hidden;

margin:0 auto;

}

#inner{

width:9999px;

overflow: hidden;

position: relative;

left:0;

/*transition: left 0.6s;*/

}

#inner a {

float: left;

}

#inner img {

display: block;

width:510px;

}

#main{

text-align: center;

}

</style>

</head>

<body>

<div id="wrap">

<div id="inner">

<a href="###"><img src="img/1.jpg"></a>

<a href="###"><img src="img/2.jpg"></a>

<a href="###"><img src="img/3.jpg"></a>

<a href="###"><img src="img/4.jpg"></a>

<a href="###"><img src="img/5.jpg"></a>

</div>

</div>

<div id="main">

<button class="active">1</button>

<button>2</button>

<button>3</button>

<button>4</button>

<button>5</button>

</div>

<script type="text/javascript">

//获取节点

var btnList = document.getElementsByTagName("button");

var inner = document.getElementById("inner");

//可见宽度

var perWidth = inner.children[0].offsetWidth;

//添加事件

//循环调用事件包装成函数tab

function tab(){

inner.style.left = -perWidth * this.index + "px";

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

btnList[j].className = "";

}

btnList[index].className = "active";

}

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

btnList[i].index = i;

btnList[i].onclick = function() {

index=this.index;

tab();

}

}

var index =0;

function prom(){

index ++;

if(index > btnList.length-1){

index = 0;

}

tab();

}

var timer = setInterval(prom,2000);

inner.onmouseover = function() {

// alert("鼠标移入");

clearInterval(timer);

}

inner.onmouseout = function() {

// alert("鼠标移出");

timer = setInterval(prom,2000);

}

</script>

</body>

</html>


以上代码是给大家分享的JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行）的全部内容，希望大家喜欢。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: