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<len;i++){
  navcontent[i].id=i;                      //函数外部给li元素设置id属性值

  //触发鼠标绑定事件
navcontent[i].onmouseover=function(){

    index=this.id;  //将当前属性值赋值给全局变量inde

  //console.log(i);  i为啥恒为4，不理解啊
    //滑过切换图片
    changeImg();
       }
    } 
}

//切换图片
function changeImg(){
for(var j=0;j<img.length;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();

/*总结：记录下踩过的坑
1、在实现鼠标滑过内容导航页时切换图片，涉及一个函数调用i变量报错，控制台打印i的值恒为4，
经查询说是函数闭包块级作用域问题，不理解，解决办法按之前学习的在函数之前，将i的每次循环
值取出来，在函数内部用this（对某个DOM对象的引用）得到当前DOM的id值赋值给全局变量index。
这个bug查了一晚上。

思考：这个事件的本质是鼠标点击切换图片，图片自定义一个索引，点击哪个显示哪个，点击绑定的
函数的作用是找到当前索引，切换图片，可当前DOM对象集合的索引就是i啊，那就只能将i给DOM
元素的某个属性，再调用属性值。
有没有其他好的办法？用函数返回值能解决么？

2、编程思路很重要，通过这次作业，感觉动手起来还是很多问题，

编程思路：用户的行为可作为主函数单线程执行，交互行为可作为封装函数，当用户相关行为发生后，调用行为的封装函数实现功能

遇到多次需要的交互，也需要封装，以便多次复用。

3、doucument.getElementById("").getElementsByTagName('')这种混用的方法，不好使，应该是浏览器问题，兼容性。
获取DOM对象后，一定要控制台打印下，看看有没有取到，也是坑。
*/