<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
/*
设置outer的样式
*/
#outer{
/* 设置宽和高 */
width: 740px;
height: 960px;
/* 居中 */
margin: 50px auto;
/* margin:50 auto 50 auto;表示上下为50，左右为auto */
background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
/* 设置padding内边距 上下为10px 左右为0*/
padding: 10px 0;
/* 开启相对定位 */
position: relative;
/* 裁剪溢出的内容 */
overflow: hidden;
}
img{
width: 720px;
height: 960px;
}
/* 设置imgList */
#imgList{
/* 去除项目符号 */
list-style: none;
/* 设置ul的宽度 */
/* width: 3700px; */
/* 开启绝对定位 */
position: absolute;
/* 设置偏移量 */
/* 每向左移动740px，就会显示到下一张图片 */
/* left: -740px; */
}
/* 设置图片中的li */
#imgList li{
/*设置浮动 */
float: left;
/* 设置左右外边距 */
margin: 0 10px;
}
/* 设置导航按钮 */
#navDiv{
/* 开启绝对定位 */
position: absolute;
/* 设置位置 */
bottom: 15px;
/* 设置left值
outer宽度 740
navDiv宽度 35*5=175
740- 175=565/2=281
*/
/* left: 281px; */
}
#navDiv a{
/* 设置超链接浮动*/
float: left;
/* 设置超链接的宽和高 */
width: 25px;
height: 25px;
/* 设置背景颜色 */
background-color:red;
/* 设置左右外边距 */
margin: 0 10px;
/* 设置透明 */
opacity: 0.5;
/* 兼容IE8透明 */
filter: alpha(opacity=50);
}
/* 设置鼠标移入的效果 */
#navDiv a:hover{
background-color: black;
}
</style>
<!-- 引用工具 -->
<script type="text/javascript" src="./js/tools.js">
</script>
<script>
window.onload=function(){
// 获取imgList
var imgList=document.getElementById("imgList");
// 获取页面中所有的img标签
var imgArr=document.getElementsByTagName("img");
// 设置imgList的宽度
imgList.style.width=740*imgArr.length+"px";
//设置导航按钮居中
// 获取navDiv
var navDiv=document.getElementById("navDiv");
// 获取outer
var outer=document.getElementById("outer");
// 设置navDiv的left值
navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
// 默认显示图片的索引
var index=0;
// 获取所有的a
var allA=document.getElementsByTagName("a");
// 设置默认选中的效果
allA[index].style.backgroundColor="black";
/*
点击超链接切换到指定的图片
点击第一个超链接，显示第一个图片
点击第二个超链接，显示第二个图片
*/
// 为所有的超链接都绑定单击响应函数
for(var i=0;i<allA.length;i++){
// 为每一个超链接都添加一个num属性
allA[i].num=i;
// 为超链接绑定单击响应函数
allA[i].onclick=function(){
// 关闭自动切换的定时器
clearInterval(timer);
// 获取点击超链接的索引，并将其设置为index
index=this.num;
// 切换图片
/*
第一张 0 0
第二张 1 -740
第三张 2 -1480
*/
// imgList.style.left=-740*index+"px";
// 设置选中的a
setA();
// 使用move函数来切换图片
move(imgList,"left",-740*index,60,function(){
// 动画执行完毕，开启自动切换
autoChange();
});
};
}
// 开启自动切换图片
autoChange();
//创建一个方法用来设置选中的a
function setA(){
// 判断当前索引是否是最后一张图片
if(index >= imgArr.length-1){
// 则将index设置为0
index =0;
// 此时显示的最后一张图片，而最后一张图片和第一张是一模一样
// 通过css将最后一张切换成第一张
imgList.style.left=0;
}
// 遍历所有a，并将它们的背景颜色设置为红色
for(var i=0;i<allA.length;i++){
allA[i].style.backgroundColor="red";
}
// 将选中的a设置为黑色
allA[index].style.backgroundColor="black";
};
// 定义一个自动切换的定时器的标识
var timer;
// 创建一个函数，用来开启自动切换图片
function autoChange(){
// 开启一个定时器，用来定时去切换图片
timer=setInterval(function(){
// 使索引自增
index++;
// 判断index的值
index%=imgArr.length;
// 执行动画，切换图片
move(imgList,"left",-740*index,20,function(){
// 修改导航按钮
setA();
});
}, 3000);
}
};
</script>
</head>
<body>
<!-- 创建一个外部的div，来作为大的容器 -->
<div id="outer">
<!-- 创建一个ul，用于放置图片 -->
<ul id="imgList">
<li><img src="./img/6.jpg"/></li>
<li><img src="./img/7.jpg"/></li>
<li><img src="./img/3.jpg"/></li>
<li><img src="./img/4.jpg"/></li>
<li><img src="./img/5.jpg"/></li>
<li><img src="./img/6.jpg"/></li>
</ul>
<!-- 创建导航按钮 -->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
