此次在练习一的基础上进行完善实现图片的轮番播放及地区的选择
index.html网页主页
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<!-- 页面结构划分 -->
<div id="container">
<!-- 1.导航 -->
<div id="nav">
<!-- 1.1右侧导航 -->
<ul class="rightNav">
<li>
<a href="#">[登录]</a>
，
<a href="#">[注册，有惊喜]</a>
</li>
<li>
<b></b>
<a href="#">果园公告</a>
</li>
<li>
<b></b>
<a href="#">券卡兑换</a>
</li>
<li>
<b></b>
<a href="#">手机果园</a>
</li>
</ul>
<!-- 1.2左侧导航 -->
<ol class="leftNav">
<li class="address">
<span class="currentAddress">上海</span> <!-- 用于修改显示地区信息 -->
<!-- 左侧导航的三角标 -->
<u></u>
<!-- 地区下拉列表 -->
<ul class="select">
<li>北京</li>
<li>广州</li>
<li>深圳</li>
</ul>
</li>
<li>满百包邮(含郊区)</li>
<li>星夜达</li>
</ol>
</div>
<!-- 2.横幅 -->
<div id="banner">
<!-- 图片轮播 -->
<div class="wrapper">
<img src="1-270x270-2163-8PBW628F.jpg">
<img src="banner1.jpg">
<img src="banner2.jpg">
<img src="banner1.jpg">
</div>
<ul class="imgNav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>
<!-- 3.今日推荐 -->
<div id="adv">
<a href="">
<img src="25af37592bf484fbeaef1cc4ff1e09c7.jpg">
</a>
<a href="">
<img src="2ba20598135dbba5e97d241ebfa167d9.jpg">
</a>
<a href="">
<img src="904419aa2e364412b3c07c3cbda24ef9.jpg">
</a>
<a href="">
<img src="2ba20598135dbba5e97d241ebfa167d9.jpg" class="lastImg">
</a>
</div>
<!-- 4.主体信息 -->
<div id="main">
<!-- 上方 生活卡券部分 -->
<div class="item">
<p class="goodsClass">
<img src="t4.png">
<a href="#">更多</a>
</p>
<!-- 下方 商品信息展示 -->
<ul>
<li>
<p><img src="1-270x270-3877-BXDY6KCU.jpg"></p>
<div class="content">
<a href="#">
<img src="cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p><img src="1-270x270-3877-BXDY6KCU.jpg"></p>
<div class="content">
<a href="#">
<img src="cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p><img src="1-270x270-3877-BXDY6KCU.jpg"></p>
<div class="content">
<a href="#">
<img src="cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p><img src="1-270x270-3877-BXDY6KCU.jpg"></p>
<div class="content">
<a href="#">
<img src="cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li class="no-margin">
<p><img src="1-270x270-3877-BXDY6KCU.jpg"></p>
<div class="content">
<a href="#">
<img src="cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p><img src="1-270x270-3877-BXDY6KCU.jpg"></p>
<div class="content">
<a href="#">
<img src="cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p><img src="1-270x270-3877-BXDY6KCU.jpg"></p>
<div class="content">
<a href="#">
<img src="cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p><img src="1-270x270-3877-BXDY6KCU.jpg"></p>
<div class="content">
<a href="#">
<img src="cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
<li>
<p><img src="1-270x270-3877-BXDY6KCU.jpg"></p>
<div class="content">
<a href="#">
<img src="cart.png">
</a>
<p>欢乐时光果篮</p>
<span>
¥188.00/份
</span>
</div>
</li>
</ul>
</div>
</div>
<!-- 5.底部信息 -->
<!-- 主体信息模块高度为0（子元素全部浮动），影响底部模块布局，需要清除浮动
1.由于主体信息可以动态加载，不能固定高度
2.可以给父元素设置overflow:hidden;
3.也可以设置清除浮动：为父元素末尾添加空的块级标签，设置为clear:both; -->
<div id="footer"></div>
</div>
</body>
</html>index.css调整页面上元素位置，设置相应的页面样式
/*统一设置页面样式*/
body{
/*字体样式 大小和名称*/
font:12px "仿宋","黑体",sans-serif;
color: #9a9a9a;
}
/*清除默认样式*/
body,h1,h2,h3,h4,h5,h6,p,ol,ul{
margin: 0;
padding:0;
list-style: none;
}
a{
text-decoration: none;
color: #9a9a9a;
}
a:hover{
color: #64A131;
}
/*设置照片的垂直对齐方式*/
img{
vertical-align: bottom;
}
/*宽度设置及居中效果*/
#container{
width: 990px;
margin: 0 auto;
}
/*导航部分样式*/
#nav{
height: 30px;
background: #eee;
line-height: 30px;
}
/*右侧导航*/
#nav .rightNav{
float: right;
}
#nav .rightNav>li{
float: left;
padding: 0 5px;
}
#nav .rightNav>li>b{
border-left: 1px solid #9a9a9a;
margin-right: 5px;
}
/*左侧导航*/
#nav .leftNav>li{
float: left;
padding-left: 10px;
}
#nav .leftNav>li>u{
/*左侧导航的三角标*/
/* width: 0;
height: 0;
border-top: 7px solid #999999;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid transparent;
float: right;
margin-top: 12px;
margin-left: 7px;*/
/*或者*/
display: inline-block;
width: 0;
height: 0;
border: 7px solid transparent;
border-top: 7px solid #999999;
position: relative;
top:4px;
}
#nav .address{
/*用于使下拉列表实现绝对定位*/
position: relative;
}
#nav .select{
/*将下拉列表隐藏*/
display: none;
/*使用绝对定位使下拉列表时不占位*/
position: absolute;
/*调整堆叠次序，使下拉菜单在上方显示*/
z-index: 100;
color: #272822;
}
#nav .address:hover .select{
/*用于显示隐藏的下拉列表*/
display: block;
}
#nav .select>li:hover{
/*使鼠标放在地区上时其对应加粗*/
font-weight: bold;
}
/*2.横幅*/
#banner{
margin: 15px 0;
/*用于保证图片索引定位*/
position: relative;
}
#banner img{
/*调整图片尺寸*/
width: 100%;
height: 207px;
}
/*设置除第一张图片外，其他图片都隐藏*/
#banner img:not(:first-child){
/*用伪类选择器*/
display: none;
}
/*图片轮播上的索引布局调整*/
#banner .imgNav{
/*定位*/
position: absolute;
right: 20px;
bottom: 10px;
}
#banner .imgNav>li{
float: left;
width: 20px;
height: 20px;
margin: 0 10px;
background: gray;
/*调整位置及形状*/
text-align: center;
line-height:20px;
border-radius: 50%;
}
#banner .imgNav>li:first-child{
/*匹配作为第一个子元素的li元素*/
background: red;
}
#banner .imgNav>li>a{
color: #fff;
}
/*3.今日推荐*/
#adv{
height: 112px;
}
#adv img{
float: left;
width: 240px;
margin-right: 10px;
}
#adv .lastImg{
margin-right: 0;
}
/*4.主体信息*/
#main{
margin-top: 25px;
/*多余溢出确保底部信息的位置*/
overflow: hidden;
}
#main .goodsClass{
border-top: 1px solid #ccc;
padding-top: 15px;
margin-bottom: 10px;
}
#main .goodsClass>a{
/*上方生活卡券部分布局*/
float: right;
margin-top: 15px;
font: 16px "宋体";
color: #333333;
}
/*商品信息部分*/
#main .item>ul>li{
float: left;
width: 190px;
margin-right: 10px;
}
#main .item>ul>li.no-margin{
margin:0;
}
#main .item>ul>li>p{
/*做溢出处理 使图片放大时不占其他元素*/
width: 190px;
height: 190px;
overflow: hidden;
}
#main .item>ul>li>p>img{
width: 190px;
/*添加过渡属性*/
transition: all 0.3s;
}
#main .item>ul>li>p>img:hover{
/*设置鼠标移到对应图片上有放大效果*/
transform: scale(1.1);
}
#main .content>a{
/*购物框位置移动*/
float: right;
}
/*调整购物框下方布局*/
#main .content{
margin-top: 10px;
}
#main .content>p{
color: #555;
font:16px '宋体';
margin-bottom: 3px;
margin-left: 3px;
}
#main .content>span{
margin-left: 3px;
font:16px '宋体';
}
/*5.底部信息*/
#footer{
height: 200px;
background: red;
}index.js控制网页地区切换，图片的轮番播放等事件
window.onload = function (){
// 控制实现地区切换
// 获取元素节点
var currentAddr = document.getElementsByClassName("currentAddress")[0]
var select = document.getElementsByClassName("select")[0]
// 获取内层列表中地址项
var address = select.children;
// 为每一项添加点击事件
for(var i = 0;i <address.length;i ++){
address[i].onclick = function(){
// 传值
currentAddr.innerHTML = this.innerHTML;
}
}
// -----------图片轮播实现----------
// 1.获取图片数组
// 2.定时器实现图片切换
// 3.图片切换主要切换数组下标，防止数组越界
var banner = document.getElementsByClassName("wrapper")[0];
var imgs = banner.children; //图片数组
var imgNav = document.getElementsByClassName("imgNav")[0]
var indInfo = imgNav.children; //索引数组
var imgIndex = 0; //初始下标
var timer;
timer = setInterval(autoPlay,1000); //定时器，间歇调用每隔一秒调用一次
function autoPlay(){
// 不断设置元素的隐藏与显示
imgs[imgIndex].style.display = "none";
// // if语句做判断 处理越界问题
// ++ imgIndex;
// if(imgIndex == imgs.length){
// imgIndex = 0;
// }
// 三目运算符做判断 处理越界问题
imgIndex = ++ imgIndex == imgs.length ? 0:imgIndex;
imgs[imgIndex].style.display = "block"
// 遍历图片索引数组 将其他改为灰色
for(var i = 0;i<indInfo.length;i ++){
indInfo[i].style.background = "gray";
}
// 切换图片索引 （以背景色切换）
indInfo[imgIndex].style.background = "red";
}
// 设置鼠标移入时停止图片轮播 用鼠标移入移出属性
// 鼠标移入时操作
banner.onmouseover = function(){
//停止定时器
clearInterval(timer);
}
// 鼠标移出时操作
banner.onmouseout = function(){
timer = setInterval(autoPlay,1000);
}
}最终的页面效果如下图所示
