编程 Javascript

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

Posted in Javascript onSeptember 23, 2020

本文实例为大家分享了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;
}
/*隐藏子菜单*/

// 声明全局变量
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图片轮播

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

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

- Author -

于珂琛。

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

FireFox中textNode分片的问题

Apr 10 Javascript

JQUERY 浏览器判断实现函数

Aug 20 Javascript

JS中动态添加事件(绑定事件)的代码

Jan 09 Javascript

JS继承笔记

Jul 13 Javascript

浅析document.createDocumentFragment()与js效率

Jul 08 Javascript

JQuery下拉框应用示例介绍

Apr 23 Javascript

JavaScript动态添加事件之事件委托

Jul 12 Javascript

AngularJS基础 ng-non-bindable 指令详细介绍

Aug 02 Javascript

新入门node.js必须要知道的概念(必看篇)

Aug 10 Javascript

jQuery判断邮箱格式对错实例代码讲解

Apr 12 jQuery

使用纯前端JavaScript实现Excel导入导出方法过程详解

Aug 07 Javascript

vue 使用原生组件上传图片的实例

Sep 08 Javascript

Vue3为什么这么快

Sep 23 #Javascript

Angular短信模板校验代码

Sep 23 #Javascript

JavaScript实现单点登录的示例

Sep 23 #Javascript

Vue+Java+Base64实现条码解析的示例

Sep 23 #Javascript

通过实例解析jQ Ajax操作相关原理

Sep 23 #Javascript

js实现三角形粒子运动

Sep 22 #Javascript

js操作两个json数组合并、去重，以及删除某一项元素

Sep 22 #Javascript