<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/css.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>
<!-- 上一张、下一张按钮 -->
<!-- "javascript:void(0) "表示不超链接-->
<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 type="text/javascript" src="js/js.js"></script>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
}
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;
/*为了使三张图片重叠，使用绝对定位，并且是相对父元素的，因此.banner设置相对定位*/
background-repeat: no-repeat;
display:none;/*先使所有图片都隐藏，然后在不同情况下显示*/
}
.slide-active{
display: block;
}
.slide1{
background-image: url("../img/bg1.jpg");
}
.slide2{
background-image: url("../img/bg2.jpg");
}
.slide3{
background-image: url("../img/bg3.jpg");
}
.button{
position: absolute;/*相对于main定位*/
width: 40px;
height: 80px;
left:244px;/*菜单栏*/
top:50%;/*main的高度一半，但由于设置了height:80px,因此需要设置margin-top*/
margin-top:-40px;
background: url(../img/arrow.png) no-repeat center center;/*水平和垂直都居中，background与background-image有什么区别？*/
}
.button:hover{
background-color:#333;/*注意这里不用background，因为会.button的该属性冲突*/
opacity:0.5;
filter:alpha(opacity=50);/*兼容其它浏览器*/
}
.prev{
transform: rotate(180deg);/*旋转*/
}
.next{
left:auto;
right:0px;/*因为.button 设置了left:244，现在直接设置right:0px,冲突，优先left，因此先设置left为auto，再设置right*/
}
.dots{
position: absolute;
right:20px;
bottom: 24px;
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: #fff;
}
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;
function slideImg(){
var main = byId("main");
//画过清除定时器，离开继续
main.onmouseover = function(){
//滑过清除定时器
if(timer) clearInterval(timer);
}
//调用onmouseout事件
main.onmouseout = function(){
/*setInterval使得一个函数每隔固定时间被调用一次*/
/*setTimeout 超时定时器*/
timer = setInterval(function(){
index++;
if(index >= len){
index = 0;
}
console.log(index);
//切换图片
changeImg();
},3000);
}
//自动触发鼠标离开时间
main.onmouseout();//调用onmouseout方法
// 遍历所有点击，且绑定点击事件，点击圆点切换图片
for(var d=0;d<len;d++){
dots[d].id = d;//直接添加一个id属性
dots[d].onclick = function(){
//alert(d);//function会改变作用域，获得的是d的最终值，即3
//改变index用于切换图片
index = this.id;
changeImg();
}
}
//下一张
next.onclick = function(){
index++;
if(index >=len){
index = 0;
}
changeImg();
}
//上一章
prev.onclick = function(){
index --;
if(index <0){
index = len - 1;
}
changeImg();
}
}
//切换图片
function changeImg(){
//pics[index].className = "slide-active";//这是重写类，直接设成了slide-active
for(var i=0;i<len;i++){
pics[i].style.display = "none";
dots[i].className = "";//改变其class 为 ""
}
pics[index].style.display = "block";
dots[index].className = "active";
}
slideImg();
