js实现轮播图练习

//封装一个获取DOM元素的函数
function byClassName(classname){
return typeof(classname)==="string"?document.getElementsByClassName(classname):classname;
}

function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}

//定义一个全局变量index
var index=0;

//获取导航列表DOM对象
var navcontent=document.getElementsByTagName("li");
var img=byClassName("img");
var len=navcontent.length;
var size=img.length;
var timer=null;

//console.log(len);
//console.log(navcontent);
//console.log(img);

//设置定时器,实现图片自动轮播
function autoPlay(){
timer=setInterval(function(){

    if(index>=size){
 index=0;
    }
    changeImg();
    index++;
    },1000)

}

//清除定时器
function stopPlay(){
if(timer) clearInterval(timer);
}

//导航内容项鼠标滑过事件
function mouseclick(){
for(var i=0;i
//切换图片

function changeImg(){

for(var j=0;j
    //当需要切换图片时，遍历所有的导航内容项和图片，将内容项背景设置为默认色，将所有导航图片隐藏
      img[j].style.display="none";
      navcontent[j].style.background="";

}    //显示当前需要的内容导航项背景和图片导航项
    img[index].style.display="block";
    navcontent[index].style.background="#ffcc00";
}
//主函数

function slide(){
//调用内容导航项鼠标滑动函数
mouseclick();

//id方式获取图片导航项盒子DOM对象

var navImgBox=byId("navimgbox");
//绑定鼠标滑过时，清除轮播效果
navImgBox.onmouseover=function(){
    stopPlay();
}

//绑定鼠标离开时，继续轮播
navImgBox.onmouseout=function(){
    autoPlay();
}
}
//打开页面自动轮播

autoPlay();

//打开页面触发主函数

slide();