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"></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; } /*隐藏子菜单*/
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图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)