javascript實現(xiàn)點擊按鈕切換輪播圖功能
更新時間：2020年09月23日 16:34:23 作者：于珂琛。
這篇文章主要為大家詳細介紹了javascript實現(xiàn)點擊按鈕切換輪播圖功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)點擊按鈕切換輪播圖的具體代碼，供大家參考，具體內容如下
菜單區(qū)域實現(xiàn)
劃過主菜單顯示子菜單
輪播區(qū)域實現(xiàn)
1、點擊圖片中左右箭頭，分別跳轉上一張與下一張
（1）點擊上一張圖其實就是讓一個變量進行遞減，點擊下一張圖就是讓變量遞增；（控制索引最大最小值）
2、點擊右下角小圓也可以進行圖片的跳轉
（1）通過索引讓變量進行隨意的修改
3、每間隔3s進行輪播圖的自動切換，鼠標放在圖片上清除自動切換
（1）定時器
4、鼠標放在主菜單上顯示子菜單，離開子菜單消失。
放在子菜單上顯示子菜單，離開消失。
源代碼：
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>手機、配件</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>電腦</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>家用電器</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>家具</span> <i class="icon"></i> </a> </div> </div> <!-- 子菜單 --> <div class="sub-menu hide" id="sub-menu"> <!-- 子菜單背景 --> <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> </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="">數(shù)據線</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="">中國聯(liá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">智能設備：</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">娛樂：</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> </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> </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="">硬盤</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="">游戲機</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> <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="">U盤</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> </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> </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="">多門</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="">滾筒式洗衣機</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 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="">臺燈</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="">應急燈</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="">裝飾字畫</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> <!-- 焦點圖 --> <div class="banner" id="banner"> <!-- 鼠標懸停停止自動輪播的區(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;
}
/*通配符選擇器，外邊距，內邊距為0*/
body{
font-family: "微軟雅黑";
color: #14191e;
}
/*字體，字體顏色*/
@font-face{
font-family: 'iconfont';/*自定義名稱，要有意義，不準數(shù)字*/
src: url('../font/iconfont.eot');/*兼容ie9以上版本*/
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),/*兼容ie6-8版本*/
url('../font/iconfont.ttf') format('truetype'),/*主要針對手機端瀏覽器 safari android ios*/
url('../font/iconfont.woff') format('woff'),/*兼容所有瀏覽器 */
url('../font/iconfont.svg#iconfont') format('svg');/*針對ios端開發(fā) legacy ios*/
/* font-weight: bold;<字體加粗>
font-style: normal;默認的正常顯示*/
}
/*獲取下載的字體*/
a{
text-decoration: none;
}
/*沒有下劃線*/
a:link,a:visited{
color: #5e5e5e;
}
/*聯(lián)合選擇器，未訪問連接時與已經訪問鏈接時的字體顏色*/
.main{
width: 1200px;
height: 460px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
/*最大框架：寬；高；外邊距，上下30px，左右居中；溢出的部分隱藏；相對定位*/
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
cursor: pointer;
}
/*焦點圖：寬；高；溢出的部分隱藏；小手標志*/
.banner-slide{
width: 1200px;
height: 460px;
float: right;
background-repeat: no-repeat;
display: none;
}
/*三個圖片：寬；高；右浮動，背景不重復;全部隱藏*/
.slide1{
background-image: url(../img/bg1.jpg);
display: block;
}
/*第一個圖片;塊級元素顯示*/
.slide2{
background-image: url(../img/bg2.jpg);
}
/*第二個圖片*/
.slide3{
background-image: url(../img/bg3.jpg);
}
/*第三個圖片*/
.button{
position: absolute;
width: 40px;
height: 80px;
right: 0;
background: url(../img/arrow.png) center center no-repeat;
top: 50%;
margin-top: -40px;
}
/*左右兩個按鈕；寬；高；相對main絕對定位，距右0，距上50%；背景圖片，水平垂直居中，不重復；外上邊距-40px；*/
.button:hover{
background-color: #333;
opacity: 0.8;
filter: alpha(opacity=80);
}
/*鼠標懸浮在上面時狀態(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);
}
/*左按鈕相對上面：靠左244px，定位左的優(yōu)先級高于右；旋轉180度*/
.dots{
position: absolute;
right: 24px;
bottom: 24px;
line-height: 12px;
}
/*下面三個選擇圓：相對main絕對定位，距右，距下，行間距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;
}
/*子孫后代選擇器：轉換為塊級元素并列一排；寬；高；削圓；背景顏色；外左邊距，讓他們之間有距離；盒子陰影，水平偏移量，垂直偏移量，模糊度，擴展多少，顏色模糊度，內陰影;小手標志*/
.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;
}
/*主菜單背景，相對main絕對定位，左上偏移；寬；高；背景顏色模糊度；層疊模式數(shù)字大的在上面顯示*/
.menu-content{
position: absolute;
left: 0;
top: 0;
width: 244px;
height: 460px;
z-index: 2;
}
/*主菜單（因為菜單不需要模糊度所以單獨拿出來設置css樣式）*/
.menu-item{
height: 64px;
line-height: 66px;
cursor: pointer;
padding: 0 24px;
}
/*主菜單的每個標題，寬；行間距；因為是鏈接，浮在上面顯示小手標志；內邊距，上下0，左右24px；下劃線兩邊留空*/
.menu-item a{
display: block;
color: #fff;
font-size: 16px;
border-bottom: 1px solid rgba(255,255,255,.2);
height: 63px;
position: relative;
}
/*轉換為塊級元素；字體顏色；字體大??；下邊框，粗細，實線，顏色透明度；高；相對定位*/
.menu-item:last-child a{
border-bottom:none;
}
/*menu-item的最后一個元素a；沒有下邊框*/
.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;
}
/*子孫后代選擇器：相對a絕對定位；右下偏移；字體顏色模糊度；沒有斜體；沒有加粗；字體；字體大小*/
.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);
}
/*子菜單：寬；高；相對main絕對定位，左上偏移；背景顏色；層疊模式數(shù)字大的在上面顯示；邊框；盒子陰影*/
.inner-box{
width: 100%;
height: 100%;
background: url(../img/fe.png);
display: none;
}
/*子菜單背景：寬；高；背景圖片;全部隱藏*/
.sub-inner-box{
width: 652px;
margin-left: 40px;
overflow: hidden;
}
/*子菜單內容；寬；外左邊距；溢出的內容隱藏*/
.title{
font-size: 16px;
color: #f01414;
line-height: 16px;
font-weight: bold;
margin: 28px 0 30px 0;
}
/*子菜單內容的標題：字體大?。活伾?；行高；粗體；外邊距*/
.sub-row{
margin-bottom: 25px;
}
/*子菜單內容：外下邊距讓他們之間有距離*/
.bold{
font-weight: bold;
}
/*子標題：字體加粗*/
.ml10{
margin-left: 10px;
}
/*內容和斜杠之間的左邊距離*/
.mr10{
margin-right: 10px;
}
/*內容、子標題和斜杠之間的右邊距離*/
.hide{
display: none;
}
/*隱藏子菜單*/
js
// 聲明全局變量
window.onload=function(){
var index = 0,//當前顯示圖片的索引，默認值為0
timer = null, //定時器
cease = byId("cease"),//鼠標懸停停止自動輪播的區(qū)域
prev = byId("prev"),//上一張
next = byId("next"),//下一張
banner = byId("banner"),//焦點圖的爺爺
pics = banner.getElementsByTagName('div'),//焦點圖
dots = byId("dots").getElementsByTagName('span'),//圓點
menuContent = byId("menu-content"),//主菜單
menuItems = menuContent.getElementsByClassName("menu-item"),//主菜單的標題
subMenu = byId("sub-menu"),//子菜單
innerBox = subMenu.getElementsByClassName("inner-box"),//子菜單的標題
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（）三元運算符
function byId(id){
return typeof(id) === "string" ? document.getElementById(id):id;
}
/*封裝通用事件綁定方法；
element綁定事件的DOM元素
事件名
事件處理程序
*/
function addHandler(element,type,handler){
//針對非IE瀏覽器
if (element,addEventListener) {
element.addEventListener(type,handler,true);
} //IE瀏覽器支持DOM2級
else if (element,attachEvent) {
element.attachEvent('on' + type,handler);
} //IE瀏覽器不支持DOM2級，使用DOM0級
else{
element['on' + type] = handler;
//變量不可以.type，事件可以.；
}
}
//封裝函數(shù)，切換圖片
function changImg(){
//遍歷所有圖片，將圖片隱藏，將圓點上的類清除
for(var i=0;i<size;i++){
pics[i].style.display = 'none';
dots[i].className = "";
}
//顯示當前圖片
pics[index].style.display = 'block';
//當前圓點高亮顯示
dots[index].className = "active";
}
// 點擊下一張按鈕顯示下一張圖片
addHandler(next,"click",function(){
index++;
if (index>=size) index = 0;
changImg();
});
// 點擊上一張按鈕顯示上一張圖片
addHandler(prev,"click",function(){
index--;
if (index<0) index = size-1;
changImg();
});
//點擊圓點索引切換圖片
for(var j=0;j<size;j++){
dots[j].setAttribute('tid',j);
addHandler(dots[j],'click',function(){
//自定義屬性不可以直接點，需用getAttribute
index = this.getAttribute('tid');
changImg();
})
}
//定時器,開啟自動輪播
function startAutoPlay(){
timer = setInterval(function(){
index++;
if (index>=size) index = 0;
changImg();
},3000)
}
//清除定時器，停止自動輪播
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";
//獲取當前主菜單的索引
index = this.getAttribute('data-index');
//遍歷所有的子菜單innerbox，將它們隱藏
for(var l=0;l<llen;l++){
//隱藏所有的子菜單
innerBox[l].style.display = "none";
//所有主菜單取消背景
menuItems[l].style.background = 'none';
}
//找到當前子菜單，讓其顯示出來
innerBox[index].style.display = "block";
//當前主菜單顯示背景
menuItems[index].style.background = 'rgba(0,0,0,.1)';
}
//鼠標滑過主菜單和子菜單
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)
}
//鼠標滑入子菜單，顯示子菜單
addHandler(subMenu,"mouseover",function(){
subMenu.className = "sub-menu";
})
//鼠標離開主菜單，隱藏子菜單
addHandler(menuContent,"mouseout",function(){
subMenu.className = "sub-menu hide";
bgNone();
})
//鼠標離開子菜單，隱藏子菜單
addHandler(subMenu,"mouseout",function(){
subMenu.className = "sub-menu hide";
bgNone();
})
//鼠標滑入cease，停止輪播
addHandler(cease,"mouseover",ceaseAutoPlay);
//鼠標離開cease，繼續(xù)輪播
addHandler(cease,"mouseout",startAutoPlay);
//自動開啟輪播
startAutoPlay();
}
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
javascript基礎知識之html5輪播圖實例講解（44）
這篇文章主要為大家詳細介紹了javascript基礎知識之html5輪播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了webpack4.x打包過程詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
javascript中call,apply,bind的區(qū)別詳解
這篇文章主要介紹了javascript中call,apply,bind的區(qū)別詳解，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
本文總結了javascript中的六種迭代器的使用實例，分別是forEach迭代器、every迭代器、some迭代器、reduce迭代器、map迭代器和fiter迭代器，有需要的小伙伴們可以參考借鑒。2016-08-08
計時器提供了一 個可以將代碼片段異步延時執(zhí)行的能力，javascript生來是單線程的（在一定時間范圍內僅一部分js代碼能運行），計時器為我們提供了一種避開這種 限制的方法，從而開辟了另一條執(zhí)行代碼的蹊徑。2015-07-07
把多個JavaScript函數(shù)綁定到onload事件處理函數(shù)上的方法
下面小編就為大家?guī)硪黄讯鄠€JavaScript函數(shù)綁定到onload事件處理函數(shù)上的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
如果你無法理解博文在講什么，請回顧前面的系列博文。文章比較深入，如有不對之處，望請指正，謝謝。2010-10-10
用Javascript判斷圖片是否存在，不存在則顯示默認圖片的代碼
用Javascript判斷圖片是否存在，不存在則顯示默認圖片的代碼,需要的朋友可以參考下。2007-03-03
uni-app是一個使用Vue.js開發(fā)所有前端應用的框架,下面這篇文章主要給大家介紹了關于uniApp常見面試題及答案的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
js 樹組復制方法2009-02-02