javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js点击按钮切换轮播图

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

作者:于珂琛。

这篇文章主要为大家详细介绍了javascript实现点击按钮切换轮播图功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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">&#xe665;</i>
 </a>
 </div>
 <div class="menu-item">
 <a href="">
 <span>电脑</span>
 <i class="icon">&#xe665;</i>
 </a>
 </div>
 <div class="menu-item">
 <a href="">
 <span>家用电器</span>
 <i class="icon">&#xe665;</i>
 </a>
 </div>
 <div class="menu-item">
 <a href="">
 <span>家具</span>
 <i class="icon">&#xe665;</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;
}
/*隐藏子菜单*/

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" ? 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图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文