为了账号安全,请及时绑定邮箱和手机立即绑定

js实现轮播图练习

标签:
JavaScript

//封装一个获取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对象后,一定要控制台打印下,看看有没有取到,也是坑。
*/

点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消