javascript實(shí)現(xiàn)點(diǎn)擊按鈕切換輪播圖功能

更新時(shí)間：2020年09月23日 16:34:23 作者：于珂琛。

這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕切換輪播圖功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)點(diǎn)擊按鈕切換輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

菜單區(qū)域?qū)崿F(xiàn)

劃過(guò)主菜單顯示子菜單

輪播區(qū)域?qū)崿F(xiàn)

1、點(diǎn)擊圖片中左右箭頭，分別跳轉(zhuǎn)上一張與下一張

（1）點(diǎn)擊上一張圖其實(shí)就是讓一個(gè)變量進(jìn)行遞減，點(diǎn)擊下一張圖就是讓變量遞增；（控制索引最大最小值）

2、點(diǎn)擊右下角小圓也可以進(jìn)行圖片的跳轉(zhuǎn)

（1）通過(guò)索引讓變量進(jìn)行隨意的修改

3、每間隔3s進(jìn)行輪播圖的自動(dòng)切換，鼠標(biāo)放在圖片上清除自動(dòng)切換

（1）定時(shí)器

4、鼠標(biāo)放在主菜單上顯示子菜單，離開(kāi)子菜單消失。

放在子菜單上顯示子菜單，離開(kāi)消失。

源代碼：

html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>輪播圖</title>
 <link rel="stylesheet" type="text/css" href="css/style.css" />
 <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
 <div class="main" id="main">
 <!-- 主菜單背景 -->
 <div class="menu-box"></div>
 <!-- 主菜單 -->
 <div class="menu-content" id="menu-content">
 <div class="menu-item">
 <a href="">
 <span>手機(jī)、配件</span>
 <i class="icon">&#xe665;</i>
 </a>
 </div>
 <div class="menu-item">
 <a href="">
 <span>電腦</span>
 <i class="icon">&#xe665;</i>
 </a>
 </div>
 <div class="menu-item">
 <a href="">
 <span>家用電器</span>
 <i class="icon">&#xe665;</i>
 </a>
 </div>
 <div class="menu-item">
 <a href="">
 <span>家具</span>
 <i class="icon">&#xe665;</i>
 </a>
 </div>
 </div>
 <!-- 子菜單 -->
 <div class="sub-menu hide" id="sub-menu">
 <!-- 子菜單背景 -->
 <div class="inner-box">
 <!-- 子菜單內(nèi)容 -->
 <div class="sub-inner-box">
 <div class="title">手機(jī)、配件</div>
 <div class="sub-row">
 <span class="bold mr10">手機(jī)通訊：</span>
 <a href="">手機(jī)</a>
 <span class="ml10 mr10">/</span>
 <a href="">手機(jī)維修</a>
 <span class="ml10 mr10">/</span>
 <a href="">以舊換新</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">手機(jī)配件：</span>
 <a href="">手機(jī)殼</a>
 <span class="ml10 mr10">/</span>
 <a href="">手機(jī)儲(chǔ)蓄卡</a>
 <span class="ml10 mr10">/</span>
 <a href="">數(shù)據(jù)線(xiàn)</a>
 <span class="ml10 mr10">/</span>
 <a href="">充電器</a>
 <span class="ml10 mr10">/</span>
 <a href="">電池</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">運(yùn)營(yíng)商：</span>
 <a href="">中國(guó)聯(lián)通</a>
 <span class="ml10 mr10">/</span>
 <a href="">中國(guó)移動(dòng)</a>
 <span class="ml10 mr10">/</span>
 <a href="">中國(guó)電信</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">智能設(shè)備：</span>
 <a href="">智能手環(huán)</a>
 <span class="ml10 mr10">/</span>
 <a href="">智能家居</a>
 <span class="ml10 mr10">/</span>
 <a href="">智能手表</a>
 <span class="ml10 mr10">/</span>
 <a href="">其他配件</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">娛樂(lè)：</span>
 <a href="">耳機(jī)</a>
 <span class="ml10 mr10">/</span>
 <a href="">音響</a>
 <span class="ml10 mr10">/</span>
 <a href="">收音機(jī)</a>
 <span class="ml10 mr10">/</span>
 <a href="">麥克風(fēng)</a>
 </div>
 </div>
 </div>
 <div class="inner-box">
 <div class="sub-inner-box">
 <div class="title">電腦</div>
 <div class="sub-row">
 <span class="bold mr10">電腦：</span>
 <a href="">筆記本</a>
 <span class="ml10 mr10">/</span>
 <a href="">平板</a>
 <span class="ml10 mr10">/</span>
 <a href="">一體機(jī)</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">電腦配件：</span>
 <a href="">顯示器</a>
 <span class="ml10 mr10">/</span>
 <a href="">CPU</a>
 <span class="ml10 mr10">/</span>
 <a href="">主板</a>
 <span class="ml10 mr10">/</span>
 <a href="">硬盤(pán)</a>
 <span class="ml10 mr10">/</span>
 <a href="">電源</a>
 <span class="ml10 mr10">/</span>
 <a href="">顯卡</a>
 <span class="ml10 mr10">/</span>
 <a href="">其他配件</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">游戲設(shè)備：</span>
 <a href="">游戲機(jī)</a>
 <span class="ml10 mr10">/</span>
 <a href="">耳機(jī)</a>
 <span class="ml10 mr10">/</span>
 <a href="">游戲軟件</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">網(wǎng)絡(luò)產(chǎn)品：</span>
 <a href="">路由器</a>
 <span class="ml10 mr10">/</span>
 <a href="">網(wǎng)絡(luò)機(jī)頂盒</a>
 <span class="ml10 mr10">/</span>
 <a href="">交換機(jī)</a>
 <span class="ml10 mr10">/</span>
 <a href="">存儲(chǔ)卡</a>
 <span class="ml10 mr10">/</span>
 <a href="">網(wǎng)卡</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">外部產(chǎn)品：</span>
 <a href="">鼠標(biāo)</a>
 <span class="ml10 mr10">/</span>
 <a href="">鍵盤(pán)</a>
 <span class="ml10 mr10">/</span>
 <a href="">U盤(pán)</a>
 <span class="ml10 mr10">/</span>
 <a href="">移動(dòng)硬盤(pán)</a>
 <span class="ml10 mr10">/</span>
 <a href="">鼠標(biāo)墊</a>
 <span class="ml10 mr10">/</span>
 <a href="">電腦清潔</a>
 </div>
 </div>
 </div>
 <div class="inner-box">
 <div class="sub-inner-box">
 <div class="title">家用電器</div>
 <div class="sub-row">
 <span class="bold mr10">電視：</span>
 <a href="">國(guó)產(chǎn)品牌</a>
 <span class="ml10 mr10">/</span>
 <a href="">韓國(guó)品牌</a>
 <span class="ml10 mr10">/</span>
 <a href="">歐美品牌</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">空調(diào)：</span>
 <a href="">顯示器</a>
 <span class="ml10 mr10">/</span>
 <a href="">柜式</a>
 <span class="ml10 mr10">/</span>
 <a href="">中央</a>
 <span class="ml10 mr10">/</span>
 <a href="">壁掛式</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">冰箱：</span>
 <a href="">多門(mén)</a>
 <span class="ml10 mr10">/</span>
 <a href="">對(duì)開(kāi)門(mén)</a>
 <span class="ml10 mr10">/</span>
 <a href="">三門(mén)</a>
 <span class="ml10 mr10">/</span>
 <a href="">雙門(mén)</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">洗衣機(jī)：</span>
 <a href="">滾筒式洗衣機(jī)</a>
 <span class="ml10 mr10">/</span>
 <a href="">迷你洗衣機(jī)</a>
 <span class="ml10 mr10">/</span>
 <a href="">洗烘一體機(jī)</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">廚房電器：</span>
 <a href="">抽煙機(jī)</a>
 <span class="ml10 mr10">/</span>
 <a href="">洗碗機(jī)</a>
 <span class="ml10 mr10">/</span>
 <a href="">燃?xì)庠?lt;/a>
 </div>
 </div>
 </div>
 <div class="inner-box">
 <div class="sub-inner-box">
 <div class="title">家具</div>
 <div class="sub-row">
 <span class="bold mr10">家紡：</span>
 <a href="">被子</a>
 <span class="ml10 mr10">/</span>
 <a href="">枕頭</a>
 <span class="ml10 mr10">/</span>
 <a href="">四件套</a>
 <span class="ml10 mr10">/</span>
 <a href="">床墊</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">燈具：</span>
 <a href="">臺(tái)燈</a>
 <span class="ml10 mr10">/</span>
 <a href="">頂燈</a>
 <span class="ml10 mr10">/</span>
 <a href="">節(jié)能燈</a>
 <span class="ml10 mr10">/</span>
 <a href="">應(yīng)急燈</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">廚具：</span>
 <a href="">烹飪鍋具</a>
 <span class="ml10 mr10">/</span>
 <a href="">餐具</a>
 <span class="ml10 mr10">/</span>
 <a href="">菜板刀具</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">家裝：</span>
 <a href="">地毯</a>
 <span class="ml10 mr10">/</span>
 <a href="">沙發(fā)墊套</a>
 <span class="ml10 mr10">/</span>
 <a href="">裝飾字畫(huà)</a>
 <span class="ml10 mr10">/</span>
 <a href="">照片墻</a>
 <span class="ml10 mr10">/</span>
 <a href="">窗簾</a>
 </div>
 <div class="sub-row">
 <span class="bold mr10">生活日用：</span>
 <a href="">收納用品</a>
 <span class="ml10 mr10">/</span>
 <a href="">浴室用品</a>
 <span class="ml10 mr10">/</span>
 <a href="">雨傘雨衣</a>
 </div>
 </div>
 </div>
 </div>
 <!-- 焦點(diǎn)圖 -->
 <div class="banner" id="banner">
 <!-- 鼠標(biāo)懸停停止自動(dòng)輪播的區(qū)域 -->
 <section class="cease" id="cease"></section>
 <a href="">
 <div class="banner-slide slide1"></div>
 </a>
 <a href="">
 <div class="banner-slide slide2"></div>
 </a>
 <a href="">
 <div class="banner-slide slide3"></div>
 </a>
 </div>
 <!-- 按鈕 -->
 <a href="javascript:void(0)" class="button prev" id="prev"></a>
 <a href="javascript:void(0)" class="button next" id="next"></a>
 <div class="dots" id="dots">
 <span class="active"></span>
 <span></span>
 <span></span>
 </div>
 </div>
</body>
</html>

css

*{
 margin: 0;
 padding: 0;
}
/*通配符選擇器，外邊距，內(nèi)邊距為0*/
body{
 font-family: "微軟雅黑";
 color: #14191e;
}
/*字體，字體顏色*/
@font-face{
 font-family: 'iconfont';/*自定義名稱(chēng)，要有意義，不準(zhǔn)數(shù)字*/
 src: url('../font/iconfont.eot');/*兼容ie9以上版本*/
 src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),/*兼容ie6-8版本*/
 url('../font/iconfont.ttf') format('truetype'),/*主要針對(duì)手機(jī)端瀏覽器 safari android ios*/
 url('../font/iconfont.woff') format('woff'),/*兼容所有瀏覽器 */
 url('../font/iconfont.svg#iconfont') format('svg');/*針對(duì)ios端開(kāi)發(fā) legacy ios*/
/* font-weight: bold;<字體加粗>
 font-style: normal;默認(rèn)的正常顯示*/
}
/*獲取下載的字體*/
a{
 text-decoration: none;
}
/*沒(méi)有下劃線(xiàn)*/
a:link,a:visited{
 color: #5e5e5e;
}
/*聯(lián)合選擇器，未訪(fǎng)問(wèn)連接時(shí)與已經(jīng)訪(fǎng)問(wèn)鏈接時(shí)的字體顏色*/
.main{
 width: 1200px;
 height: 460px;
 margin: 30px auto;
 overflow: hidden;
 position: relative;
}
/*最大框架：寬；高；外邊距，上下30px，左右居中；溢出的部分隱藏；相對(duì)定位*/
.banner{
 width: 1200px;
 height: 460px;
 overflow: hidden;
 cursor: pointer;
}
/*焦點(diǎn)圖：寬；高；溢出的部分隱藏；小手標(biāo)志*/
.banner-slide{
 width: 1200px;
 height: 460px;
 float: right;
 background-repeat: no-repeat;
 display: none;
}
/*三個(gè)圖片：寬；高；右浮動(dòng)，背景不重復(fù);全部隱藏*/

.slide1{
 background-image: url(../img/bg1.jpg);
 display: block;
}
/*第一個(gè)圖片;塊級(jí)元素顯示*/
.slide2{
 background-image: url(../img/bg2.jpg);
}
/*第二個(gè)圖片*/
.slide3{
 background-image: url(../img/bg3.jpg);
}
/*第三個(gè)圖片*/
.button{
 position: absolute;
 width: 40px;
 height: 80px;
 right: 0;
 background: url(../img/arrow.png) center center no-repeat;
 top: 50%;
 margin-top: -40px;
}
/*左右兩個(gè)按鈕；寬；高；相對(duì)main絕對(duì)定位，距右0，距上50%；背景圖片，水平垂直居中，不重復(fù)；外上邊距-40px；*/
.button:hover{
 background-color: #333;
 opacity: 0.8;
 filter: alpha(opacity=80);
}
/*鼠標(biāo)懸浮在上面時(shí)狀態(tài)：背景顏色，透明度。照顧IE瀏覽器*/
.prev{
 left: 244px;
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);
}
/*左按鈕相對(duì)上面：靠左244px，定位左的優(yōu)先級(jí)高于右；旋轉(zhuǎn)180度*/
.dots{
 position: absolute;
 right: 24px;
 bottom: 24px;
 line-height: 12px;
}
/*下面三個(gè)選擇圓：相對(duì)main絕對(duì)定位，距右，距下，行間距12px；*/
.dots span{
 display: inline-block;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: rgba(7,17,27,.4);
 margin-left: 8px;
 box-shadow: 0 0 0 2px rgba(255,255,255,.8) inset;
 cursor: pointer;
}
/*子孫后代選擇器：轉(zhuǎn)換為塊級(jí)元素并列一排；寬；高；削圓；背景顏色；外左邊距，讓他們之間有距離；盒子陰影，水平偏移量，垂直偏移量，模糊度，擴(kuò)展多少，顏色模糊度，內(nèi)陰影;小手標(biāo)志*/
.dots .active{
 background-color: #fff;
 box-shadow: 0 0 0 2px rgba(255,255,255,.4) inset;
}
/*背景顏色，同上*/
.menu-box{
 position: absolute;
 left: 0;
 top: 0;
 width: 244px;
 height: 460px;
 background: rgba(7,17,27,.3);
 z-index: 1;
}
/*主菜單背景，相對(duì)main絕對(duì)定位，左上偏移；寬；高；背景顏色模糊度；層疊模式數(shù)字大的在上面顯示*/
.menu-content{
 position: absolute;
 left: 0;
 top: 0;
 width: 244px;
 height: 460px;
 z-index: 2;
}
/*主菜單（因?yàn)椴藛尾恍枰：人詥为?dú)拿出來(lái)設(shè)置css樣式）*/
.menu-item{
 height: 64px;
 line-height: 66px;
 cursor: pointer;
 padding: 0 24px;
}
/*主菜單的每個(gè)標(biāo)題，寬；行間距；因?yàn)槭擎溄?，浮在上面顯示小手標(biāo)志；內(nèi)邊距，上下0，左右24px；下劃線(xiàn)兩邊留空*/
.menu-item a{
 display: block;
 color: #fff;
 font-size: 16px;
 border-bottom: 1px solid rgba(255,255,255,.2);
 height: 63px;
 position: relative;
}
/*轉(zhuǎn)換為塊級(jí)元素；字體顏色；字體大小；下邊框，粗細(xì)，實(shí)線(xiàn)，顏色透明度；高；相對(duì)定位*/
.menu-item:last-child a{
 border-bottom:none;
}
/*menu-item的最后一個(gè)元素a；沒(méi)有下邊框*/
.menu-item i{
 position: absolute;
 right: 12px;
 top: 2px;
 color: rgba(255,255,255,.5);
 font-style: normal;
 font-weight: normal;
 font-family: "iconfont";
 font-size: 24px;
}
/*子孫后代選擇器：相對(duì)a絕對(duì)定位；右下偏移；字體顏色模糊度；沒(méi)有斜體；沒(méi)有加粗；字體；字體大小*/
.sub-menu{
 width: 730px;
 height: 458px;
 position: absolute;
 left: 244px;
 top: 0;
 background: #fff;
 z-index: 50;
 border: 1px solid #d9dde1;
 box-shadow: 0 4px 8px 0px rgba(0,0,0,.1);
}
/*子菜單：寬；高；相對(duì)main絕對(duì)定位，左上偏移；背景顏色；層疊模式數(shù)字大的在上面顯示；邊框；盒子陰影*/
.inner-box{
 width: 100%;
 height: 100%;
 background: url(../img/fe.png);
 display: none;
}
/*子菜單背景：寬；高；背景圖片;全部隱藏*/
.sub-inner-box{
 width: 652px;
 margin-left: 40px;
 overflow: hidden;
}
/*子菜單內(nèi)容；寬；外左邊距；溢出的內(nèi)容隱藏*/
.title{
 font-size: 16px;
 color: #f01414;
 line-height: 16px;
 font-weight: bold;
 margin: 28px 0 30px 0;
}
/*子菜單內(nèi)容的標(biāo)題：字體大??；顏色；行高；粗體；外邊距*/
.sub-row{
 margin-bottom: 25px;
}
/*子菜單內(nèi)容：外下邊距讓他們之間有距離*/
.bold{
 font-weight: bold;
}
/*子標(biāo)題：字體加粗*/
.ml10{
 margin-left: 10px;
}
/*內(nèi)容和斜杠之間的左邊距離*/
.mr10{
 margin-right: 10px;
}
/*內(nèi)容、子標(biāo)題和斜杠之間的右邊距離*/
.hide{
 display: none;
}
/*隱藏子菜單*/

js

// 聲明全局變量
window.onload=function(){
 var index = 0,//當(dāng)前顯示圖片的索引，默認(rèn)值為0
 timer = null, //定時(shí)器
 cease = byId("cease"),//鼠標(biāo)懸停停止自動(dòng)輪播的區(qū)域
 prev = byId("prev"),//上一張
 next = byId("next"),//下一張
 banner = byId("banner"),//焦點(diǎn)圖的爺爺
 pics = banner.getElementsByTagName('div'),//焦點(diǎn)圖
 dots = byId("dots").getElementsByTagName('span'),//圓點(diǎn)
 menuContent = byId("menu-content"),//主菜單
 menuItems = menuContent.getElementsByClassName("menu-item"),//主菜單的標(biāo)題
 subMenu = byId("sub-menu"),//子菜單
 innerBox = subMenu.getElementsByClassName("inner-box"),//子菜單的標(biāo)題
 mlen = menuItems.length,
 size = pics.length,
 llen = innerBox.length;
 // console.log(size);




console.log(lis_1[0]);
lis_1[0].onclick = function(){
 department.className = 'hide'
 hospital.className = 'hospital'
 lis_1[0].className = 'li_1'
}
lis_1[1].onclick = function(){
 department.className = ''
 hospital.className = 'hospital hide'
 lis_1[1].className = 'li_1'
}


//封裝getElementById（）三元運(yùn)算符
function byId(id){
 return typeof(id) === "string" ? document.getElementById(id):id;
}

/*封裝通用事件綁定方法；
 element綁定事件的DOM元素
 事件名
 事件處理程序
*/
function addHandler(element,type,handler){
 //針對(duì)非IE瀏覽器
 if (element,addEventListener) {
 element.addEventListener(type,handler,true);
 } //IE瀏覽器支持DOM2級(jí)
 else if (element,attachEvent) {
 element.attachEvent('on' + type,handler);
 } //IE瀏覽器不支持DOM2級(jí)，使用DOM0級(jí)
 else{
 element['on' + type] = handler;
 //變量不可以.type，事件可以.；
 }
}

//封裝函數(shù)，切換圖片
function changImg(){
 //遍歷所有圖片，將圖片隱藏，將圓點(diǎn)上的類(lèi)清除
 for(var i=0;i<size;i++){
 pics[i].style.display = 'none';
 dots[i].className = "";
 }
 //顯示當(dāng)前圖片
 pics[index].style.display = 'block';
 //當(dāng)前圓點(diǎn)高亮顯示
 dots[index].className = "active";
}

// 點(diǎn)擊下一張按鈕顯示下一張圖片
addHandler(next,"click",function(){
 index++;
 if (index>=size) index = 0;
 changImg();
});

// 點(diǎn)擊上一張按鈕顯示上一張圖片
addHandler(prev,"click",function(){
 index--;
 if (index<0) index = size-1;
 changImg();
});

//點(diǎn)擊圓點(diǎn)索引切換圖片
for(var j=0;j<size;j++){
 dots[j].setAttribute('tid',j);
 addHandler(dots[j],'click',function(){
 //自定義屬性不可以直接點(diǎn)，需用getAttribute
 index = this.getAttribute('tid');
 changImg();
 })
}

//定時(shí)器,開(kāi)啟自動(dòng)輪播
function startAutoPlay(){
 timer = setInterval(function(){
 index++;
 if (index>=size) index = 0;
 changImg();
 },3000)
}

//清除定時(shí)器，停止自動(dòng)輪播
function ceaseAutoPlay(){
 if(timer){
 clearInterval(timer);
 }
}

//封裝函數(shù)，取消所有主菜單背景
function bgNone(){
 for(var n=0;n<mlen;n++){
 menuItems[n].style.background = 'none';
 }
}

//封裝函數(shù)，子菜單和主菜單背景顯示
function menuItemsBg(){
 //顯示子菜單所在的背景
 subMenu.className = "sub-menu";
 //獲取當(dāng)前主菜單的索引
 index = this.getAttribute('data-index');
 //遍歷所有的子菜單innerbox，將它們隱藏
 for(var l=0;l<llen;l++){
 //隱藏所有的子菜單
 innerBox[l].style.display = "none";
 //所有主菜單取消背景
 menuItems[l].style.background = 'none';
 }
 //找到當(dāng)前子菜單，讓其顯示出來(lái)
 innerBox[index].style.display = "block";
 //當(dāng)前主菜單顯示背景
 menuItems[index].style.background = 'rgba(0,0,0,.1)';
}

//鼠標(biāo)滑過(guò)主菜單和子菜單
for(var k=0;k<mlen;k++){
 //給所有主菜單定義屬性，表明它的索引
 menuItems[k].setAttribute('data-index',k);
 //給所有子菜單定義屬性，表明它的索引
 innerBox[k].setAttribute('data-index',k);
 addHandler(menuItems[k],"mouseover",menuItemsBg)
 addHandler(innerBox[k],"mouseover",menuItemsBg)
}

//鼠標(biāo)滑入子菜單，顯示子菜單
addHandler(subMenu,"mouseover",function(){
 subMenu.className = "sub-menu";
})

//鼠標(biāo)離開(kāi)主菜單，隱藏子菜單
addHandler(menuContent,"mouseout",function(){
 subMenu.className = "sub-menu hide";
 bgNone(); 
})

//鼠標(biāo)離開(kāi)子菜單，隱藏子菜單
addHandler(subMenu,"mouseout",function(){
 subMenu.className = "sub-menu hide";
 bgNone();
})

//鼠標(biāo)滑入cease，停止輪播
addHandler(cease,"mouseover",ceaseAutoPlay);
//鼠標(biāo)離開(kāi)cease，繼續(xù)輪播
addHandler(cease,"mouseout",startAutoPlay);

//自動(dòng)開(kāi)啟輪播
startAutoPlay();

}

精彩專(zhuān)題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: