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

(编辑：jimmy 日期: 2024/11/25 浏览：3 次 )

本文实例为大家分享了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图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：javascript使用正则表达式实现注册登入校验
下一篇：Vue3为什么这么快