当前位置:首页 > Web开发 > 正文

清除间歇调用timer 5、当鼠标离开图片区域

2024-03-31 Web开发

btn.onclick  等同于  btn[“onclick”]    //任何的  .  都可以用[”  “]取代

ie9或以上的透明度用opcity : .8 ;ie8及以下用filter:alpha(opcity=80)

一、焦点图布局及样式

技术图片

二、主菜单

技术图片

三、子菜单

技术图片

四、上下一张按钮,及小圆点高亮

1、界说一个全局变量a,暗示当前图片的索引

2、获取当前有几多张图片pics,pics.length

3、点击下一张,a++,如果a>=pics.length,那么a=0

4、用for循环把所有的图片隐藏,,所有的的小圆点打消高亮

5、a就是当前图片、小圆点的索引,用pics[a].style或className,就可以显示出来

五、点击小圆点跳转到相应的图片

1、用size暗示有几多个圆点

2、用for循环,size作为循环次数。内部dots[d].id = d,给dot添加id值

3、给每一个小圆点绑定事件,a = this.id,当前的id赋予a,再按照a来切换图片

六、自动轮播与断根自动轮播

1、设置一个全局变量timer=null

2、封装一个函数,里面

timer = setInterval(function(){index++;
if(index>=size) index=0;
change();//改换图片
},3000);

3、挪用该函数

4、当鼠标进入图片区域,断根间歇挪用timer

5、当鼠标分开图片区域,继续挪用轮播函数

七、子菜单显示与隐藏

1、遍历出主菜单的每一行,并给它添加上自界说属性menuItems[m].setAttribute(“data-index”,m),并给每一行绑定函数

2、鼠标滑过主菜单的标题,获取自界说属性的值idx

3、把所有子菜单遍历出来,并隐藏,把索引值即是idx的子菜单显示

4、鼠标滑过主菜单,把所有主菜单标题配景去除,把索引值即是idx的设置配景

5、鼠标分开主菜单,子菜单隐藏

6、鼠标进入子菜单,子菜单显示

7、鼠标分开子菜单,子菜单隐藏

11-项目:JS实现轮播图特效

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31096.html