本文实例为大家分享了js实现点击按钮切换轮播图的具体代码，供大家参考，具体内容如下
菜单区域实现
划过主菜单显示子菜单
轮播区域实现
1、点击图片中左右箭头，分别跳转上一张与下一张
（1）点击上一张图其实就是让一个变量进行递减，点击下一张图就是让变量递增；（控制索引最大最小值）
2、点击右下角小圆也可以进行图片的跳转
（1）通过索引让变量进行随意的修改
3、每间隔3s进行轮播图的自动切换，鼠标放在图片上清除自动切换
（1）定时器
4、鼠标放在主菜单上显示子菜单，离开子菜单消失。
放在子菜单上显示子菜单，离开消失。
源代码：
html
轮播图 手机、配件 电脑 家用电器 家具 手机、配件 手机通讯： 手机 / 手机维修 / 以旧换新 手机配件： 手机壳 / 手机储蓄卡 / 数据线 / 充电器 / 电池 运营商： 中国联通 / 中国移动 / 中国电信 智能设备： 智能手环 / 智能家居 / 智能手表 / 其他配件 娱乐： 耳机 / 音响 / 收音机 / 麦克风 电脑 电脑： 笔记本 / 平板 / 一体机 电脑配件： 显示器 / CPU / 主板 / 硬盘 / 电源 / 显卡 / 其他配件 游戏设备： 游戏机 / 耳机 / 游戏软件 网络产品： 路由器 / 网络机顶盒 / 交换机 / 存储卡 / 网卡 外部产品： 鼠标 / 键盘 / U盘 / 移动硬盘 / 鼠标垫 / 电脑清洁 家用电器 电视： 国产品牌 / 韩国品牌 / 欧美品牌 空调： 显示器 / 柜式 / 中央 / 壁挂式 冰箱： 多门 / 对开门 / 三门 / 双门 洗衣机： 滚筒式洗衣机 / 迷你洗衣机 / 洗烘一体机 厨房电器： 抽烟机 / 洗碗机 / 燃气灶 家具 家纺： 被子 / 枕头 / 四件套 / 床垫 灯具： 台灯 / 顶灯 / 节能灯 / 应急灯 厨具： 烹饪锅具 / 餐具 / 菜板刀具 家装： 地毯 / 沙发垫套 / 装饰字画 / 照片墙 / 窗帘 生活日用： 收纳用品 / 浴室用品 / 雨伞雨衣
css
*{
margin: 0;
padding: 0;
}
body{
font-family: "微软雅黑";
color: #14191e;
}
@font-face{
font-family: 'iconfont';
src: url('../font/iconfont.eot');
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
url('../font/iconfont.ttf') format('truetype'),
url('../font/iconfont.woff') format('woff'),
url('../font/iconfont.svg#iconfont') format('svg');
}
a{
text-decoration: none;
}
a:link,a:visited{
color: #5e5e5e;
}
.main{
width: 1200px;
height: 460px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
.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;
}
.button:hover{
background-color: #333;
opacity: 0.8;
filter: alpha(opacity=80);
}
.prev{
left: 244px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.dots{
position: absolute;
right: 24px;
bottom: 24px;
line-height: 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;
}
.menu-content{
position: absolute;
left: 0;
top: 0;
width: 244px;
height: 460px;
z-index: 2;
}
.menu-item{
height: 64px;
line-height: 66px;
cursor: pointer;
padding: 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 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;
}
.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);
}
.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"),//鼠标悬停停止自动轮播的区域
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;
}
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，事件可以.；
}
}
//封装函数，切换图片
function changImg(){
//遍历所有图片，将图片隐藏，将圆点上的类清除
for(var i=0;i=size) index = 0;
changImg();
});
// 点击上一张按钮显示上一张图片
addHandler(prev,"click",function(){
index--;
if (index<0) index = size-1;
changImg();
});
//点击圆点索引切换图片
for(var j=0;j=size) index = 0;
changImg();
},3000)
}
//清除定时器，停止自动轮播
function ceaseAutoPlay(){
if(timer){
clearInterval(timer);
}
}
//封装函数，取消所有主菜单背景
function bgNone(){
for(var n=0;n
精彩专题分享：jQuery图片轮播 Javascript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
