JavaScript、tab切換完整版(自動(dòng)切換、鼠標(biāo)移入停止、移開(kāi)運(yùn)行）
更新時(shí)間：2016年01月05日 15:41:50 作者：Cakty、Riven
這篇文章主要介紹了JavaScript、tab切換完整版(自動(dòng)切換、鼠標(biāo)移入停止、移開(kāi)運(yùn)行）的相關(guān)資料,需要的朋友可以參考下
效果圖如下所示：
廢話不多說(shuō)了，直接給大家貼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">
//獲取節(jié)點(diǎn)
var btnList = document.getElementsByTagName("button");
var inner = document.getElementById("inner");
//可見(jiàn)寬度
var perWidth = inner.children[0].offsetWidth;
//添加事件
//循環(huán)調(diào)用事件包裝成函數(shù)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("鼠標(biāo)移入");
clearInterval(timer);
}
inner.onmouseout = function() {
// alert("鼠標(biāo)移出");
timer = setInterval(prom,2000);
}
</script>
</body>
</html>
以上代碼是給大家分享的JavaScript、tab切換完整版(自動(dòng)切換、鼠標(biāo)移入停止、移開(kāi)運(yùn)行）的全部?jī)?nèi)容，希望大家喜歡。
您可能感興趣的文章:
- javascript實(shí)現(xiàn)tab切換的四種方法
- 一個(gè)js的tab切換效果代碼[代碼分離]
- 基于jquery的tab切換 js原理
- javascript仿126郵箱TAB切換效果
- js中常用的Tab切換效果(推薦)
- JS實(shí)現(xiàn)簡(jiǎn)單的tab切換選項(xiàng)卡效果
- js實(shí)現(xiàn)TAB切換對(duì)應(yīng)不同顏色的代碼
- javascript回車(chē)完美實(shí)現(xiàn)tab切換功能
- JS封裝的選項(xiàng)卡TAB切換效果示例
- JS簡(jiǎn)單實(shí)現(xiàn)tab切換效果的多窗口顯示功能
- JS實(shí)現(xiàn)的tab切換并顯示相應(yīng)內(nèi)容模塊功能示例
相關(guān)文章
前端JavaScript經(jīng)典操作之?dāng)?shù)組常用方法總結(jié)
數(shù)組操作是JavaScript中非常重要也非常常用的技巧,這篇文章主要給大家介紹了關(guān)于前端JavaScript經(jīng)典操作之?dāng)?shù)組常用方法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
JavaScript中運(yùn)算符規(guī)則和隱式類(lèi)型轉(zhuǎn)換示例詳解
JavaScript中運(yùn)算符規(guī)則的隱式類(lèi)型轉(zhuǎn)換是什么? 這是每個(gè)學(xué)習(xí)Javascript的新手們都應(yīng)該知道的一個(gè)問(wèn)題，下面這篇文章主要給大家介紹了關(guān)于JavaScript中運(yùn)算符規(guī)則和隱式類(lèi)型轉(zhuǎn)換的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-09-09
最近在學(xué)習(xí)微信小程序,在學(xué)習(xí)中遇到了一些問(wèn)題,所以進(jìn)行了總結(jié)了下,這篇文章主要給大家介紹了關(guān)于微信小程序在{{ }}中直接使用函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-06-06
js需要把時(shí)間戳轉(zhuǎn)為為普通格式，一般的情況下可能用不到的，下面與大家分享幾種不錯(cuò)的方法，感興趣的朋友不要錯(cuò)過(guò)2013-11-11
淺談鍵盤(pán)上回車(chē)按鈕的js觸發(fā)事件
下面小編就為大家?guī)?lái)一篇淺談鍵盤(pán)上回車(chē)按鈕的js觸發(fā)事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
JavaScript中關(guān)聯(lián)原型鏈屬性特性
這篇文章主要介紹了JavaScript中關(guān)聯(lián)原型鏈屬性特性的相關(guān)資料,需要的朋友可以參考下2016-02-02
js對(duì)象數(shù)組和對(duì)象的使用實(shí)例詳解
在本篇文章里小編給大家整理了關(guān)于js對(duì)象數(shù)組和對(duì)象的使用實(shí)例相關(guān)知識(shí)點(diǎn)，有需要的朋友們學(xué)習(xí)下。2019-08-08
H5+C3+JS實(shí)現(xiàn)雙人對(duì)戰(zhàn)五子棋游戲（UI篇）
這篇文章主要為大家詳細(xì)介紹了H5+C3+JS實(shí)現(xiàn)雙人對(duì)戰(zhàn)五子棋游戲，實(shí)現(xiàn)雙人對(duì)戰(zhàn)模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
在js代碼拼接dom對(duì)象到頁(yè)面上的模板總結(jié)
今天小編就為大家分享一篇關(guān)于在js代碼拼接dom對(duì)象到頁(yè)面上的模板總結(jié)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2018-10-10
動(dòng)態(tài)加載圖片路徑 保持JavaScript控件的相對(duì)獨(dú)立性
根據(jù)新界面的要求，需要一部分圖片來(lái)增強(qiáng)日期控件的美觀性。考慮到既要實(shí)現(xiàn)加載圖表的目標(biāo)，又要保持控件的獨(dú)立性以便將來(lái)的移植。2010-09-09