好资源导航 » 文章资讯 » javascript实现点击按钮切换轮播图功能

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

2023-07-14 20:04:03 97

本文实例为大家分享了js实现点击按钮切换轮播图的具体代码，供大家参考，具体内容如下

菜单区域实现

划过主菜单显示子菜单

轮播区域实现

1、点击图片中左右箭头，分别跳转上一张与下一张

（1）点击上一张图其实就是让一个变量进行递减，点击下一张图就是让变量递增；（控制索引最大最小值）

2、点击右下角小圆也可以进行图片的跳转

（1）通过索引让变量进行随意的修改

3、每间隔3s进行轮播图的自动切换，鼠标放在图片上清除自动切换

（1）定时器

4、鼠标放在主菜单上显示子菜单，离开子菜单消失。

放在子菜单上显示子菜单，离开消失。

源代码：

html





轮播图

手机、配件 

电脑 

家用电器 

家具 

手机、配件手机通讯：手机 / 手机维修 / 以旧换新手机配件：手机壳 / 手机储蓄卡 / 数据线 / 充电器 / 电池运营商：中国联通 / 中国移动 / 中国电信智能设备：智能手环 / 智能家居 / 智能手表 / 其他配件娱乐：耳机 / 音响 / 收音机 / 麦克风

电脑电脑：笔记本 / 平板 / 一体机电脑配件：显示器 / CPU / 主板 / 硬盘 / 电源 / 显卡 / 其他配件游戏设备：游戏机 / 耳机 / 游戏软件网络产品：路由器 / 网络机顶盒 / 交换机 / 存储卡 / 网卡外部产品：鼠标 / 键盘 / U盘 / 移动硬盘 / 鼠标垫 / 电脑清洁

家用电器电视：国产品牌 / 韩国品牌 / 欧美品牌空调：显示器 / 柜式 / 中央 / 壁挂式冰箱：多门 / 对开门 / 三门 / 双门洗衣机：滚筒式洗衣机 / 迷你洗衣机 / 洗烘一体机厨房电器：抽烟机 / 洗碗机 / 燃气灶

家具家纺：被子 / 枕头 / 四件套 / 床垫灯具：台灯 / 顶灯 / 节能灯 / 应急灯厨具：烹饪锅具 / 餐具 / 菜板刀具家装：地毯 / 沙发垫套 / 装饰字画 / 照片墙 / 窗帘生活日用：收纳用品 / 浴室用品 / 雨伞雨衣

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'),/*主要针对手机端浏览器safariandroidios*/
url('../font/iconfont.woff')format('woff'),/*兼容所有浏览器*/
url('../font/iconfont.svg#iconfont')format('svg');/*针对ios端开发legacyios*/
/*font-weight:bold;<字体加粗>
font-style:normal;默认的正常显示*/
}
/*获取下载的字体*/
a{
text-decoration:none;
}
/*没有下划线*/
a:link,a:visited{
color:#5e5e5e;
}
/*联合选择器，未访问连接时与已经访问链接时的字体颜色*/
.main{
width:1200px;
height:460px;
margin:30pxauto;
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)centercenterno-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；*/
.dotsspan{
display:inline-block;
width:12px;
height:12px;
border-radius:50%;
background-color:rgba(7,17,27,.4);
margin-left:8px;
box-shadow:0002pxrgba(255,255,255,.8)inset;
cursor:pointer;
}
/*子孙后代选择器：转换为块级元素并列一排；宽；高；削圆；背景颜色；外左边距，让他们之间有距离；盒子阴影，水平偏移量，垂直偏移量，模糊度，扩展多少，颜色模糊度，内阴影;小手标志*/
.dots.active{
background-color:#fff;
box-shadow:0002pxrgba(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:024px;
}
/*主菜单的每个标题，宽；行间距；因为是链接，浮在上面显示小手标志；内边距，上下0，左右24px；下划线两边留空*/
.menu-itema{
display:block;
color:#fff;
font-size:16px;
border-bottom:1pxsolidrgba(255,255,255,.2);
height:63px;
position:relative;
}
/*转换为块级元素；字体颜色；字体大小；下边框，粗细，实线，颜色透明度；高；相对定位*/
.menu-item:last-childa{
border-bottom:none;
}
/*menu-item的最后一个元素a；没有下边框*/
.menu-itemi{
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:1pxsolid#d9dde1;
box-shadow:04px8px0pxrgba(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:28px030px0;
}
/*子菜单内容的标题：字体大小；颜色；行高；粗体；外边距*/
.sub-row{
margin-bottom:25px;
}
/*子菜单内容：外下边距让他们之间有距离*/
.bold{
font-weight:bold;
}
/*子标题：字体加粗*/
.ml10{
margin-left:10px;
}
/*内容和斜杠之间的左边距离*/
.mr10{
margin-right:10px;
}
/*内容、子标题和斜杠之间的右边距离*/
.hide{
display:none;
}
/*隐藏子菜单*/

//声明全局变量
window.onload=function(){
varindex=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='hospitalhide'
lis_1[1].className='li_1'
}


//封装getElementById（）三元运算符
functionbyId(id){
returntypeof(id)==="string"?document.getElementById(id):id;
}

/*封装通用事件绑定方法；
element绑定事件的DOM元素
事件名
事件处理程序
*/
functionaddHandler(element,type,handler){
//针对非IE浏览器
if(element,addEventListener){
element.addEventListener(type,handler,true);
}//IE浏览器支持DOM2级
elseif(element,attachEvent){
element.attachEvent('on'+type,handler);
}//IE浏览器不支持DOM2级，使用DOM0级
else{
element['on'+type]=handler;
//变量不可以.type，事件可以.；
}
}

//封装函数，切换图片
functionchangImg(){
//遍历所有图片，将图片隐藏，将圆点上的类清除
for(vari=0;i=size)index=0;
changImg();
});

//点击上一张按钮显示上一张图片
addHandler(prev,"click",function(){
index--;
if(index<0)index=size-1;
changImg();
});

//点击圆点索引切换图片
for(varj=0;j=size)index=0;
changImg();
},3000)
}

//清除定时器，停止自动轮播
functionceaseAutoPlay(){
if(timer){
clearInterval(timer);
}
}

//封装函数，取消所有主菜单背景
functionbgNone(){
for(varn=0;n
精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
                
            
              
            
                                    上一篇
python获取时间戳的实现示例(10位和13位)
                
                                    下一篇
Springboot2.x+Quartz分布式集群的实现
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            linux实现定时备份mysql数据库的简单方法
                        
                                            
                            java服务器端微信、支付宝支付和退款功能
                        
                                            
                            10个Python小技巧你值得拥有
                        
                                            
                            浅谈vue项目打包优化策略
                        
                                            
                            vue里input根据value改变背景色的实例
                        
                                            
                            vue给组件传递不同的值方法
                        
                                            
                            vue动画之点击按钮往上渐渐显示出来的实例
                        
                                            
                            vue init webpack 建vue项目报错的解决方法
                        
                                            
                            浅谈针对Vue相同路由不同参数的刷新问题
                        
                                            
                            python实现字符串和字典的转换
                        
                                            
                            提升MongoDB性能的方法
                        
                                            
                            基于vue和react的spa进行按需加载的实现方法
                        
                                            
                            python实现字符串中字符分类及个数统计
                        
                                            
                            如何用nginx配置wordpress的方法示例
                        
                                            
                            使用 Node.js 实现图片的动态裁切及算法实例代码详解
                        
                                            
                            详解如何在阿里云上安装mysql
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图