javascript实现点击按钮切换轮播图功能

本文实例为大家分享了js实现点击按钮切换轮播图的具体代码，供大家参考，具体内容如下

菜单区域实现

划过主菜单显示子菜单

轮播区域实现

1、点击图片中左右箭头，分别跳转上一张与下一张

（1）点击上一张图其实就是让一个变量进行递减，点击下一张图就是让变量递增；（控制索引最大最小值）

2、点击右下角小圆也可以进行图片的跳转

（1）通过索引让变量进行随意的修改

3、每间隔3s进行轮播图的自动切换，鼠标放在图片上清除自动切换

（1）定时器

4、鼠标放在主菜单上显示子菜单，离开子菜单消失。

放在子菜单上显示子菜单，离开消失。

源代码：

html

 
 
 
 


 

 
 

 
 

 

 
 手机、配件
 
 
 
 

 
 电脑
 
 
 
 

 
 家用电器
 
 
 
 

 
 家具
 
 
 
 
 
 

 
 

 
 

 
手机、配件
 

 手机通讯：
 手机
 /
 手机维修
 /
 以旧换新
 
 

 手机配件：
 手机壳
 /
 手机储蓄卡
 /
 数据线
 /
 充电器
 /
 电池
 
 

 运营商：
 中国联通
 /
 中国移动
 /
 中国电信
 
 

 智能设备：
 智能手环
 /
 智能家居
 /
 智能手表
 /
 其他配件
 
 

 娱乐：
 耳机
 /
 音响
 /
 收音机
 /
 麦克风
 
 
 
 

 

 
电脑
 

 电脑：
 笔记本
 /
 平板
 /
 一体机
 
 

 电脑配件：
 显示器
 /
 CPU
 /
 主板
 /
 硬盘
 /
 电源
 /
 显卡
 /
 其他配件
 
 

 游戏设备：
 游戏机
 /
 耳机
 /
 游戏软件
 
 

 网络产品：
 路由器
 /
 网络机顶盒
 /
 交换机
 /
 存储卡
 /
 网卡
 
 

 外部产品：
 鼠标
 /
 键盘
 /
 U盘
 /
 移动硬盘
 /
 鼠标垫
 /
 电脑清洁
 
 
 
 

 

 
家用电器
 

 电视：
 国产品牌
 /
 韩国品牌
 /
 欧美品牌
 
 

 空调：
 显示器
 /
 柜式
 /
 中央
 /
 壁挂式
 
 

 冰箱：
 多门
 /
 对开门
 /
 三门
 /
 双门
 
 

 洗衣机：
 滚筒式洗衣机
 /
 迷你洗衣机
 /
 洗烘一体机
 
 

 厨房电器：
 抽烟机
 /
 洗碗机
 /
 燃气灶
 
 
 
 

 

 
家具
 

 家纺：
 被子
 /
 枕头
 /
 四件套
 /
 床垫
 
 

 灯具：
 台灯
 /
 顶灯
 /
 节能灯
 /
 应急灯
 
 

 厨具：
 烹饪锅具
 /
 餐具
 /
 菜板刀具
 
 

 家装：
 地毯
 /
 沙发垫套
 /
 装饰字画
 /
 照片墙
 /
 窗帘
 
 

 生活日用：
 收纳用品
 /
 浴室用品
 /
 雨伞雨衣
 
 
 
 
 
 

 
 

 
 

 
 
 

 
 
 

 
 
 
 
 
 

 
 
 
 
 

css

*{
 margin: 0;
 padding: 0;
}
/*通配符选择器，外边距，内边距为0*/
body{
 font-family: "微软雅黑";
 color: #14191e;
}
/*字体，字体颜色*/
@font-face{
 font-family: 'iconfont';/*自定义名称，要有意义，不准数字*/
 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端开发 legacy ios*/
/* font-weight: bold;<字体加粗>
 font-style: normal;默认的正常显示*/
}
/*获取下载的字体*/
a{
 text-decoration: none;
}
/*没有下划线*/
a:link,a:visited{
 color: #5e5e5e;
}
/*联合选择器，未访问连接时与已经访问链接时的字体颜色*/
.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);
}
/*鼠标悬浮在上面时状态：背景颜色，透明度。照顾IE浏览器*/
.prev{
 left: 244px;
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);
}
/*左按钮相对上面：靠左244px，定位左的优先级高于右；旋转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绝对定位，左上偏移；宽；高；背景颜色模糊度；层叠模式数字大的在上面显示*/
.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绝对定位，左上偏移；背景颜色；层叠模式数字大的在上面显示；边框；盒子阴影*/
.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;
}

/*封装通用事件绑定方法；
 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，事件可以.；
 }
}

//封装函数，切换图片
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图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。