首先看最后的实现效果：
- 实现每隔三秒中换一张图片
- 鼠标划过主菜单显示子菜单内容
- 实现点击箭头或者原点都可以更换轮播图
布局样式代码：（可忽略，关键在于js的编写）
/*清除全部默认样式*/
*{
padding: 0px;
margin: 0px;
text-decoration: none;
}
ul{
list-style: none;
}
body{
font-family: "微软雅黑";
color:#14191e;
}
a:link,a:visited{
color:#5e5e5e;
}
/*定义初始化字体样式，区分'' 和 "" */
@font-face {font-family: 'iconfont';
src: url('../img/font/iconfont.eot');
src: url('../img/font/iconfont.eot') format('embedded-opentype'),
url('../img/font/iconfont.woff') format('woff'),
url('../img/font/iconfont.ttf') format('truetype'),
url('../img/font/iconfont.svg#iconfont') format('svg');
}
/*主界面*/
.main{
width: 1200px;
height: 460px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
.box-banner{
width: 1200px;
height: 460px;
overflow: hidden;
}
.img-style{
height: 460px;
width: 1200px;
background-repeat:no-repeat;
/*一开始不给其显示*/
display: none;
}
.img1{
background-image: url(../img/bg1.jpg);
}
.img2{
background-image: url(../img/bg2.jpg);
}
.img3{
background-image: url(../img/bg3.jpg);
}
/*用来显示图片，表示是否显示出来*/
.banner-active{
display: block;
}
/*用来制作下一张图上一张图按钮*/
.button{
position: absolute;
height: 80px;
width: 40px;
background: url("../img/arrow.png") no-repeat center;/*图片不平铺且居中*/
top: 50%;
margin-top: -40px;
left: 244px;
}
.button:hover{
background-color: #333;
opacity: 0.8;/*设置透明度*/
filter:alpha (opacity=80);/*为了兼容别的浏览器而设置*/
}
.prev
{
/*进行图片的水平翻转*/
transform: rotate(180deg);
}
.next{
right: 0;
left: auto;
}
.dots{
position: absolute;
right: 0px;
bottom: 24px;
text-align: right;
margin-right: 40px;
}
.dots span{
display: inline-block;/*设置成一条直线排列*/
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
line-height: 12px;
/*设置基本样式*/
background: rgba(7,17,27,0.4);/*最后是设置半透明度*/
/*border:1px solid #fff;*/
/*用阴影做描边*/
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
/*添加光标状态*/
cursor: pointer;
}
/*设置选中效果*/
.dots span.dots-active {
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
background:#fff;
}
/*设计导航栏*/
.menu-box{
position: absolute;
width: 244px;
height: 466px;
/*right: 0;*/
left: 0;
top:0;
background: rgba(7,17,27,0.5);
opacity: 0.5;
z-index: 1;
}
/*在上次覆盖一层用来放内容*/
.box-content{
position: absolute;
width: 244px;
height: 454px;
padding-top: 6px;
left: 0px;
top: 0;
z-index: 2;
}
.menu-item{
height: 64px;
line-height: 64px;
font-size: 16px;
padding: 0 24px;
position: relative;
cursor: pointer;
}
.menu-item:hover{
background: rgba(0,0,0,0.2);
}
.menu-item a:link,.menu-item a:visited{
color: #fff;
}
.menu-item a{
display: block;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding: 0 8px;
height: 63px;
}
.menu-item a i{
position: absolute;
font-family: "iconfont";
font-size: 24px;
right: 32px;
top: 0px;
font-style: normal;
font-weight: normal;
color:rgba(255,255,255,0.8);
}
.sub-menu{
position: absolute;
width: 720px;
height: 460px;
z-index: 999;
left: 240px;
border:1px solid #d9dde1;
background: #fff;
top: 0;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5)
}
.inner-box{
width: 100%;
height: 100%;
background: url("../img/fe.png") no-repeat;
display: none;
}
.sub-inner-box{
width: 652px;
overflow: hidden;/*超出隐藏*/
margin-left: 40px;
}
.sub-row{
margin-bottom:25px;
}
.title{
font-size: 16px;
margin:20px 0 40px 0;
color: #f01414;
font-weight: bold;
}
.bold{
font-weight: bold;
}
.mr10{
margin-right: 10px;
}
.ml10{
margin-left: 10px;
}
.hidden{
display: none
}
html页面布局：
<!DOCTYPE html>
<html>
<head>
<title>轮播图测试</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="main" id="main">
<div class="menu-box">
</div>
<!-- 编写子菜单 -->
<div class="sub-menu hidden" 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="mr10 ml10">/</span>
<a href="#">手机维修</a>
<span class="mr10 ml10">/</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>
</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="box-content" id="box-content">
<div class="menu-item">
<a href="">
<span>手机配件</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>电脑配件</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家电中心</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>日常用品</span>
<i></i>
</a>
</div>
</div>
<div class="box-banner" id="banner">
<a href="">
<div class="img-style img1 banner-active"></div>
</a>
<a href="">
<div class="img-style img2"/></div>
</a>
<a href="">
<div class="img-style img3"/></div>
</a>
</div>
<!-- 定义一个用来显示上图和下图 -->
<a href="javascript:;" class="button prev" id="prev"></a>
<a href="javascript:;" class="button next" id="next"></a>
<!-- 设计小圆点 -->
<div class="dots" id="dots">
<span class="dots-active"></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript" src="js/solide.js"></script>
</body>
</html>
关于js的编写:
//封装一个方式来代替 getElementById 用来简化编写
function byId(id){
//判断类型是否为string，id名称一定要是string 如果正确则返回
return typeof(id) === "string"?document.getElementById(id):id;
}
//进行图片轮播图的编辑 设置全局函数用来定位轮播第几个图片等
var timer = null,
index = 0, //设置索引用来定位第几个div
//获取总共有几个div,避免索引过剩
pics = byId("banner").getElementsByTagName("div"),//获取下面的标签
len = pics.length,
dots = byId("dots").getElementsByTagName("span");
prev = byId("prev");
next = byId("next");
// 取出主菜单，下面的按钮
menu = byId("box-content");
menu_item = menu.getElementsByClassName("menu-item");
//获取子菜单内容，取消隐藏 显示出子菜单里面的内容
subMenu = byId("sub-menu");
innerMenu = subMenu.getElementsByClassName("inner-box");
function siderImg(){
var main = byId("main");
//设置鼠标滑过状态，停止定时器，停止轮播
main.onmouseover = function(){
//清除定时器
if(timer) clearInterval(timer);
}
//鼠标滑出状态，启动定时器，进行轮播
main.onmouseout = function(){
timer = setInterval(function(){
index ++;
if(index >= len)
{
index = 0;//重新回 0 ；
}
setImgView();//设置图片显示或者隐藏
},3000)
};
//调用方法，鼠标不用触发直接执行方法
main.onmouseout();
//遍历所有的点击圆点，绑定点击事件，点击切换图片
for(var d = 0; d < len;d++)
{
//要在每一次遍历的时候都给其赋值一个id
dots[d].id = d;
dots[d].onclick = function(){
//只要对索引进行赋值，就可以实现切换图片
//console.log(this.id);
index = this.id;
setImgView();
}
}
//导航菜单栏编写，鼠标划过事件
for(var m = 0; m < menu_item.length; m++)
{
//给每个data-index 自定义属性增加标签；
menu_item[m].setAttribute("data-index",m);
menu_item[m].onmouseover = function(){
// alert("yes");
subMenu.className ="sub-menu";
var idx = this.getAttribute("data-index");
//取消hidden
//鼠标划过才做隐藏
for(var j = 0;j < innerMenu.length;j ++)
{
//初始状态不显示
innerMenu[j].style.display = "none";
}
innerMenu[idx].style.display = "block";
}
//鼠标离开主菜单隐藏所有
menu.onmouseout = function(){
subMenu.className ="sub-menu hidden";
}
//鼠标放在子菜单上面要显示子菜单
subMenu.onmouseover = function(){
this.className = "sub-menu";
}
//离开子菜单隐藏
subMenu.onmouseout = function(){
this.className = "sub-menu hidden"
}
}
}
siderImg();//调用方法
function setImgView(){
//设置图片轮播
for(var i = 0; i<len;i++)
{
//进行图片的隐藏
pics[i].style.display ="none";
dots[i].className = "";
}
//根据index的索引来显示图片
pics[index].style.display = "block";
dots[index].className = "dots-active";
}
//下一页
next.onclick = function(){
index ++;
if(index >= len) index = 0;
setImgView();
//console.log(index);
}
//上一页
prev.onclick = function(){
index--;
if(index < 0) index = len - 1;
setImgView();
}
实现出轮播图效果；
关于使用到js控件备注：
**setInterval:设置定时启动；
setTimeout:设置超时启动；
typeof:判断一个数据的类型是什么：string，int;
cursor:鼠标光标状态；
=== 三目运算；
onmouseover:鼠标滑过状态；
onmouseout：鼠标滑出状态；
getElementsByTagName；获取标签
clearInterval() / clearTimeout()；清除定时器
getElementsByClassName:通过类名取到控件
setAttribute:给自定义标签增加属性；
getAttribute：获取每个自定义属性**
文件快速下载地址：
https://download.csdn.net/download/u010374999/12507304
1152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
