javascript realizes the function of switching carousel map by clicking button
- 2021-08-28 07:18:40
- OfStack
In this paper, we share the specific code of js to switch carousel maps by clicking buttons for your reference. The specific contents are as follows
Menu area implementation
Cross the main menu to display submenus
Implementation of carousel area
1. Click the left and right arrows in the picture to jump to the top one and the bottom one respectively
(1) Clicking on the previous picture is actually to make a variable decrease, and clicking on the next picture is to make the variable increase; (Control Index Maximum and Minimum)
2. Click on the small circle in the lower right corner to jump the picture
(1) Allow variables to be modified at will by indexing
3. Carry out automatic switching of carousel pictures every 3s, and put the mouse on the pictures to clear the automatic switching
(1) Timer
4. Place the mouse on the main menu to display the submenu, and leave the submenu to disappear.
Put it on the submenu to display the submenu, leave and disappear.
Source code:
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="">1体机</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="">3门</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="">洗烘1体机</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="">4件套</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;
}
/*3个图片：宽；高；右浮动，背景不重复;全部隐藏*/
.slide1{
background-image: url(../img/bg1.jpg);
display: block;
}
/*第1个图片;块级元素显示*/
.slide2{
background-image: url(../img/bg2.jpg);
}
/*第2个图片*/
.slide3{
background-image: url(../img/bg3.jpg);
}
/*第3个图片*/
.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;
}
/*下面3个选择圆：相对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;
}
/*子孙后代选择器：转换为块级元素并列1排；宽；高；削圆；背景颜色；外左边距，让他们之间有距离；盒子阴影，水平偏移量，垂直偏移量，模糊度，扩展多少，颜色模糊度，内阴影;小手标志*/
.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的最后1个元素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"),//上1张
next = byId("next"),//下1张
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（）3元运算符
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";
}
// 点击下1张按钮显示下1张图片
addHandler(next,"click",function(){
index++;
if (index>=size) index = 0;
changImg();
});
// 点击上1张按钮显示上1张图片
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();
}Wonderful topic sharing: jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel