(编辑：jimmy 日期: 2024/11/10 浏览：2)
本文实例为大家分享了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="/UploadFiles/2021-04-02/script.js">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"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" ""; } //显示当前图片 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图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。