轮播图内容和样式

carousel.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>综合实例—图片轮播</title><link rel="stylesheet" href="css/style.css" /></head><body><div class="main" id="main"><!--图片轮播--><div class="banner" id="banner"><a href=""><div class="banner-slide slide1 slide-active"></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><script src="js/script.js"></script></body>
</html>

style.css

*{margin:0;padding:0;
}ul{list-style:none;
}body{font-family:"微软雅黑";color:#14191e;
}.main{width:1200px;height:460px;margin:30px auto;overflow:hidden;position:relative;
}.banber{width:1200px;height:460px;overflow:hidden;position:relative;
}.banner-slide{width:1200px;height:460px;position:absolute;background-repeat:no-repeat;display:none;
}.slide-active{display:block;
}.slide1{background-image:url(../image/bg1.jpg);
}.slide2{background-image:url(../image/bg2.jpg);
}.slide3{background-image:url(../image/bg3.jpg);
}.button{position:absolute;width:40px;height:80px;left:244px;top:50%;margin-top:-40px;background:url(../image/arrow.png) no-repeat center center;
}.button:hover{background-color:#333;opacity:0.8;filter:alpha(opacity=80);
}.prev{transform:rotate(180deg);
}.next{left:auto;right:0;
}.dots{position:absolute;right:20px;bottom:21px;text-align:right;
}.dots span{display:inline-block;width:12px;height:12px;line-height:12px;border-radius:50%;background:rgba(7,17,27,0.4);box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;margin-left:8px;cursor:pointer;/*设置光标形状*/
}.dots span.active{box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset;background:#FFFFFF;
}

轮播图特效的实现

封装getElementById()

//封装一个代替getElementById()的方法
function byId(id){return typeof(id) === "string"?document.getElementById(id):id;
}

图片的自动轮播和停止

//全局变量
var index=0,timer=nullpics=byId("banner").getElementsByTagName("div"),len =pics.length;function slideImg(){var main =byId("main");//滑过清除定时器，离开继续main.onmouseover =function(){//滑过清除定时器if(timer){clearInterval(timer);}}main.onmouseout =function(){timer = setInterval(function(){index++;//len=3if(index>=len){index = 0;}//切换图片changeImg();},3000);}//自动在main触发鼠标离开的事件main.onmouseout();
}

图片自动轮播

//切换图片
function changeImg(){//遍历banner下所有的div，将其隐藏for (var i=0;i<len;i++) {pics[i].style.display='none';}//根据index索引找到当前div，将其显示出来pics[index].style.display='block';
}

点击圆点切换图片

//下一张next.onclick=function(){index++;if(index>=len){index=0;}//调用changeImg实现切换图片changeImg();}//上一张prev.onclick=function(){index--;if(index<0){index=len-1;}//调用changeImg实现切换图片changeImg();}

子菜单的展开和收起

html代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>综合实例—图片轮播</title><link rel="stylesheet" href="css/style.css" /></head><body><div class="main" id="main"><div class="menu-box"></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="menu-content" id="menu-content"><div class="menu-item"><a href=""><span>手机、配件</span><i>&#xe665;</i></a></div><div class="menu-item"><a href=""><span>电脑</span><i>&#xe665;</i></a></div><div class="menu-item"><a href=""><span>家用电器</span><i>&#xe665;</i></a></div><div class="menu-item"><a href=""><span>家具</span><i>&#xe665;</i></a></div></div><!--图片轮播--><div class="banner" id="banner"><a href=""><div class="banner-slide slide1 slide-active"></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><script src="js/script.js"></script></body></html>

style.css代码

*{margin:0;padding:0;
}@font-face {font-family:"iconfont";src:url("../image/font/iconfont.eot");src:url("../image/font/iconfont.eot") format("embedded-opentype"),url("../image/font/iconfont.woft") format("woft"),url("../image/font/iconfont.ttf") format("truetype"),url("../image/font/iconfont.svg#iconfog") format("svg");
}
ul{list-style:none;
}a{text-decoration:none;
}a:link,a:visited{color:#5e5e5e;
}body{font-family:"微软雅黑";color:#14191e;
}.main{width:1200px;height:460px;margin:30px auto;overflow:hidden;position:relative;
}.banner{width:1200px;height:460px;overflow:hidden;position:relative;
}.banner-slide{width:1200px;height:460px;position:absolute;background-repeat:no-repeat;display:none;
}.slide-active{display:block;
}.slide1{background-image:url(../image/bg1.jpg);
}.slide2{background-image:url(../image/bg2.jpg);
}.slide3{background-image:url(../image/bg3.jpg);
}.button{position:absolute;width:40px;height:80px;left:244px;top:50%;margin-top:-40px;background:url(../image/arrow.png) no-repeat center center;
}.button:hover{background-color:#333;opacity:0.8;filter:alpha(opacity=80);
}.prev{transform:rotate(180deg);
}.next{left:auto;right:0;
}.dots{position:absolute;right:20px;bottom:21px;text-align:right;
}.dots span{display:inline-block;width:12px;height:12px;line-height:12px;border-radius:50%;background:rgba(7,17,27,0.4);box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;margin-left:8px;cursor:pointer;/*设置光标形状*/
}.dots span.active{box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset;background:#FFFFFF;
}/*导航菜单*/
.menu-box{width:244px;height:460px;position:absolute;left:0;top:0;background:rgba(7,17,27,0.5);opacity:0.5;z-index:1;
}.menu-content{width:244px;height:454px;position:absolute;left:0;top:0;z-index:2;padding-top:6px;
}.menu-item{height:64px;line-height:66px;font-size:16px;padding:0 24px;position:relative;
}.menu-item a:link,.menu-item a:visited{color:#FFFFFF;
}.menu-item a{display:block;border-bottom:1px solid rgba(255,255,255,0.2);padding:0 8px;height:63px;
}.menu-item i {position:absolute;right:32px;font-size:24px;top:2px;font-family:"iconfont";font-style:normal;font-weight:normal;color:rgba(255,255,255,0.5);
}.sub-menu{width:730px;height:460px;border:1px solid #d9ddel;background:#FFFFFF;position:absolute;left:244px;top:0;z-index:999;box-shadow:0 4px 8px 0 rgba(0,0,0,0.1);
}.inner-box{width:100%;height:100%;background:url(../image/fe.png);display:none;
}.sub-inner-box{width:652px;margin-left:40px;overflow:hidden;
}.title{color:#f01414;font-size:16px;line-height:16px;margin:28px 0 30px 0;font-weight:bold;
}.sub-row{margin-bottom:25px;
}
.bold{font-weight:bold;
}.mr10{margin-right:10px;
}.ml10{margin-left:10px;
}.hide{display:none}

script.js代码

//封装一个代替getElementById()的方法
function byId(id) {return typeof(id) === "string" ? document.getElementById(id) : id;
}//全局变量
var index = 0,timer = null
pics = byId("banner").getElementsByTagName("div"),dots = byId("dots").getElementsByTagName("span"),prev = byId("prev"),next = byId("next"),len = pics.length,menu = byId("menu-content"),subMenu=byId("sub-menu"),innerBox=subMenu.getElementsByClassName("inner-box"),menuItems = menu.getElementsByClassName("menu-item");
//注意：getElementsByClassName这个方法在ie8及其浏览器中，不能使用。function slideImg() {var main = byId("main");//滑过清除定时器，离开继续main.onmouseover = function() {//滑过清除定时器if(timer) {clearInterval(timer);}}main.onmouseout = function() {timer = setInterval(function() {index++; //len=3if(index >= len) {index = 0;}//切换图片changeImg();}, 3000);}//自动在main触发鼠标离开的事件main.onmouseout();//遍历所有圆点，且绑定事件，点击圆点切换图片for(var d = 0; d < len; d++) {//给所有span添加一个id的属性，值为d作为当前span的索引dots[d].id = d;dots[d].onclick = function() { //注意：function改变作用域，d值始终为3//改变index为当前span的索引index = this.id;//调用changeImg实现切换图片changeImg();}}//下一张next.onclick = function() {index++;if(index >= len) {index = 0;}//调用changeImg实现切换图片changeImg();}//上一张prev.onclick = function() {index--;if(index < 0) {index = len - 1;}//调用changeImg实现切换图片changeImg();}//导航菜单//遍历主菜单，且绑定事件for(var m = 0; m < menuItems.length; m++) {//给每一个menu-item定义data-index属性，作为索引menuItems[m].setAttribute("data-index", m);menuItems[m].onmouseover = function() {subMenu.className="sub-menu";var idx = this.getAttribute("data-index");//遍历所有子菜单，将每一个都隐藏for (var j=0;j<innerBox.length;j++) {innerBox[j].style.display='none';menuItems[j].style.background="none";}menuItems[idx].style.background='rgba(0,0,0,0.1)';innerBox[idx].style.display='block';}}menu.onmouseout=function(){subMenu.className="sub-menu hide";}subMenu.onmouseover=function(){this.className="sub-menu";}subMenu.onmouseout=function(){subMenu.className="sub-menu hide";}
}//切换图片
function changeImg() {//遍历banner下所有的div及dots下所有的span，将div隐藏，将span清除类for(var i = 0; i < len; i++) {pics[i].style.display = 'none';dots[i].className = "";}//根据index索引找到当前div和当前span，将其显示出来和设置为当前spanpics[index].style.display = 'block';dots[index].className = "active";
}
slideImg();

完整项目代码：

链接: https://pan.baidu.com/s/1htmgVic 密码: mh49

前端系列之JavaScript(实现轮播特效)相关推荐

html图片快速轮播特效代码,轻松实现javascript图片轮播特效
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析 A版是一款手机DOTA应用,它涵盖了 ...
php中实现图片自动轮播,轻松实现javascript图片轮播特效_javascript技巧
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析此效果的层次结构比较清楚: 1. c ...
javascript图片轮播特效
下载地址:http://download.csdn.net/detail/yx511500623/6543857 示例: <html> <head><meta chars ...
讲给后台程序员看的前端系列教程(52)——Bootstrap轮播图
C语言自学完备手册(33篇) Android多分辨率适配框架 JavaWeb核心技术系列教程 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View ...
HTML5期末大作业：明星个人主页介绍网站设计——明星薛子谦(7页)带轮播特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计
HTML5期末大作业:明星个人主页介绍网站设计--明星薛子谦(7页)带轮播特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计大学生毕设网页设计源码H ...
css实现的图片列表切换轮播特效html页面前端源码
大家好,今天给大家介绍一款, css实现的图片列表切换轮播特效html页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 特效非常炫酷,可以用于制造音乐播放切换或视频播放切换前端(图2) 图 ...
HTML5期末大作业：动漫网站设计——福五鼠动漫(6页)带轮播特效高质量代码 HTML+CSS+JavaScript 毕设网页设计HTML
HTML5期末大作业:动漫网站设计--福五鼠动漫(6页)带轮播特效 HTML+CSS+JavaScript 大学生毕设网页设计HTML 学生网页课程设计期末作业下载 web网页设计制作成品常见网页设 ...
HTML5期末大作业：动漫网站设计——斗破苍穹动漫(6页)带轮播特效 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品
HTML5期末大作业:动漫网站设计--斗破苍穹动漫(6页)带轮播特效 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品大学生毕设网页 ...
php图片轮播特效,基于javascript实现样式清新图片轮播特效_javascript技巧
本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下一.实现效果如上图: 1.图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称 ...

前端系列之JavaScript(实现轮播特效)

轮播图内容和样式

轮播图特效的实现

子菜单的展开和收起

前端系列之JavaScript(实现轮播特效)相关推荐

最新文章

热门文章