功能：
实现图片每隔1秒切换一次；
当鼠标停留在整个页面上，图片不进行轮播；
鼠标移动到切换页选项上，出现该选项对应的图片，并且切换页选项的背景颜色发生相应的变化；
当图片发生轮播切换时，再不滑入选项卡的前提下，相应的选项卡背景颜色也自动发生变化；
点击上一张按钮，出现上一张图片，点击下一张按钮，出现下一张图片，同时选项卡的背景颜色也发生变化。
以下为实现代码：
首先为html代码，创建一个大盒子将选项卡部分和图片部分包裹起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="main" id="main">
<!-- 选项卡 -->
<div class="nav" id="nav">
<div class="nav-item nav-active">
<a href="javascript:void(0)">首页</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">点击看看</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">会自动的</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">我的网站</a>
</div>
</div>
<!-- 轮播 -->
<div class="banner" id="banner">
<a href="">
<div class="banner-slider slider1 slider-active"></div>
</a>
<a href="">
<div class="banner-slider slider2"></div>
</a>
<a href="">
<div class="banner-slider slider3"></div>
</a>
<a href="">
<div class="banner-slider slider4"></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>
</body>
<script src="../js/script.js"></script>
</html>
其次是css代码
*{
padding: 0;
margin: 0;
}
body{
font-family: 'Microsoft YaHei';
}
a{
text-decoration: none;
}
.main{
height: 540px;
width: 1200px;
position: relative;
margin: 30px auto;
overflow: hidden;
border: 1px dotted rgb(167, 166, 166);
}
/* 焦点图 */
.banner{
position: absolute;
top: 80px;
left: 0;
width: 1200px;
height: 460px;
overflow: hidden;
}
.banner-slider{
width: 1200px;
height: 460px;
float: left;
display: none;
background-repeat: no-repeat
}
.slider-active{
display: block;
}
.slider1{
background-image: url(../img/1.jpg);
}
.slider2{
background-image: url(../img/3.jpg);
}
.slider3{
background-image: url(../img/4.jpg);
}
.slider4{
background-image: url(../img/5.jpg);
}
/* 选项卡 */
.nav{
height: 80px;
width: 1200px;
background-color:#fff;
position: absolute;
top: 0;
left: 0;
}
.nav-item{
float: left;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
cursor: pointer;
}
.nav .nav-active{
background-color: #ffcc00;
border-radius: 8px;
}
.nav-item>a{
color: #666;
font-size: 22px;
}
/* 箭头按钮 */
.button{
position: absolute;
height: 80px;
width: 40px;
top: 50%;
margin-top: -40px;
left: 0;
background: url(../img/arrow.png) center center no-repeat;
transform: rotate(180deg);
}
.button:hover{
background-color: #000;
opacity: .8;
border-radius: 50%;
height: 40px;
margin-top: -20px;
}
.next{
left: auto;
right: 0;
transform: rotate(0deg);
}
js部分
可能会存在浏览器不兼容问题
使用ie8及其以下 attachEvent
其他浏览器 （不完整） addEventListener
此时需要封装一下浏览器兼容问题，由于没有用到解除绑定，这里并没有写，只写入了添加绑定。
function addHandler(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type] = handler;
}
}
由于需要调用很多次document.getElementById(),先封装一个byId函数
function byId(id) {
return typeof(id)==="string"?document.getElementById(id):id;
}
获取图片
var index = 0,
timer = null,
nav = byId('main'),
pics = byId('banner').getElementsByTagName('div'),
navItem = byId('nav').getElementsByTagName('div'),
prev = byId('prev'),
next = byId('next'),
size = pics.length;
点击下一张图片，index索引+1，当索引大于图片张数时，索引变成0回到第一张图片。
点击上一张图片时，index索引-1，当索引小于0时，索引为图片张数-1。
当我们切换图片的时候，需要遍历所有图片，将图片隐藏，并且取消选项卡背景。然后显示当时index的图片和当前index选项卡的背景颜色。由于上一张和下一张的代码重复，将他们封装成一个changeImg函数。
//切换图片
function changeImg(){
//遍历所有图片，将图片隐藏，取消选项卡背景
for(var i=0;i<size;i++){
pics[i].style.display="none";
navItem[i].className="nav-item";
}
//显示当前图片
pics[index].style.display="block";
//当前选项卡高亮
navItem[index].className="nav-item nav-active";
}
//下一张
addHandler(next,"click",function(){
index++;//点击下一张图片，索引+1
//当索引大于张数，索引回0变成第一张
if(index>=size) index=0;
changeImg();
})
//上一张
addHandler(prev,"click",function(){
index--;//点击上一张图片，索引-1
//当索引小于0时，索引为张数-1
if(index<0) index =size-1;
changeImg();
})
点击选项卡索引切换图片，给选项卡添加属性，这里由于还没有学到作用域的问题，用了这个方法，实际上id不建议用数字来显示。index等于当前的id属性，由于用到的是data-id有个-,故不能使用this.data-id,可以使用this.["data-id"]或者是this.getAttribute("data-id")
//点击选项卡索引切换图片
for(var d =0;d<size;d++){
navItem[d].setAttribute("data-id",d);//添加data-id属性
addHandler(navItem[d],"mouseover",function(){
index=this.getAttribute("data-id");//index等于当前的id属性
changeImg();
})
}
开启自动轮播
function startAutoPlay(){
timer = setInterval(function(){
index++;
if(index>=size) index=0;
changeImg();
},1000);
}
//自动开启轮播
startAutoPlay();
清除定时器，停止自动轮播，如果定时器还没有开启，就不需要停止，需要做一个判断。
function stopAutoPlay(){
if(timer){//如果定时器开启了，则清除
clearInterval(timer);
}
}
鼠标滑入main,停止轮播；鼠标离开main，继续轮播
addHandler(main,"mouseover",stopAutoPlay);
addHandler(main,"mouseout",startAutoPlay);
全部js代码：
var index = 0,
timer = null,
nav = byId('main'),
pics = byId('banner').getElementsByTagName('div'),
navItem = byId('nav').getElementsByTagName('div'),
prev = byId('prev'),
next = byId('next'),
size = pics.length;
//封装byId函数
function byId(id) {
return typeof(id)==="string"?document.getElementById(id):id;
}
//封装浏览器兼容
function addHandler(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type] = handler;
}
}
//清除定时器，停止自动轮播
function stopAutoPlay(){
if(timer){//如果定时器开启了，则清除
clearInterval(timer);
}
}
//开启自动轮播
function startAutoPlay(){
timer = setInterval(function(){
index++;
if(index>=size) index=0;
changeImg();
},1000);
}
//切换图片
function changeImg(){
//遍历所有图片，将图片隐藏，取消选项卡背景
for(var i=0;i<size;i++){
pics[i].style.display="none";
navItem[i].className="nav-item";
}
//显示当前图片
pics[index].style.display="block";
//当前选项卡高亮
navItem[index].className="nav-item nav-active";
}
//点击选项卡索引切换图片
for(var d =0;d<size;d++){
navItem[d].setAttribute("data-id",d);//添加data-id属性
addHandler(navItem[d],"mouseover",function(){
index=this.getAttribute("data-id");//index等于当前的id属性
changeImg();
})
}
//下一张
addHandler(next,"click",function(){
index++;//点击下一张图片，索引+1
//当索引大于张数，索引回0变成第一张
if(index>=size) index=0;
changeImg();
})
//上一张
addHandler(prev,"click",function(){
index--;//点击上一张图片，索引-1
//当索引小于0时，索引为张数-1
if(index<0) index =size-1;
changeImg();
})
//鼠标滑入main,停止轮播
addHandler(main,"mouseover",stopAutoPlay);
//鼠标离开main，继续轮播
addHandler(main,"mouseout",startAutoPlay);
//自动开启轮播
startAutoPlay();
