本文实例为大家分享了js实现点击按钮切换轮播图的具体代码，供大家参考，具体内容如下
菜单区域实现
划过主菜单显示子菜单
轮播区域实现
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=\"\">数据线</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> </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=\"\">节能灯</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=\"\">雨伞雨衣</a> </div> </div> </div> </div> <!-- 焦点图 --> <div class=\"banner\" id=\"banner\"> <!-- 鼠标悬停停止自动轮播的区域 --> <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\';/*自定义名称，要有意义，不准数字*/
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;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);
}
}
//封装函数，取消所有主菜单背景
function bgNone(){
for(var n=0;n<mlen;n++){
menuItems[n].style.background = \'none\';
}
}
//封装函数，子菜单和主菜单背景显示
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，继续轮播
addHandler(cease,\"mouseout\",startAutoPlay);
//自动开启轮播
startAutoPlay();
}
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持免费资源网。
© 版权声明
THE END
暂无评论内容