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

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、鼠标离开子菜单,子菜单隐藏

原文地址:https://www.cnblogs.com/mingliangge/p/12207688.html

时间: 2024-10-01 06:09:38

11-项目:JS实现轮播图特效的相关文章

JS原生轮播图

哈喽!我的朋友们,最近有一个新项目.所以一直没更新!有没有想我啊!! 今天咱们来说一下JS原生轮播图! 话不多说: 直接来代码吧:下面是CSS部分: 1 *{ 2 padding: 0px; 3 margin: 0px; 4 } 5 img{ 6 width: 500px; 7 height: 300px; 8 } 9 li{ 10 float: left; 11 } 12 ul{ 13 width: 2000px; 14 list-style: none; 15 position: absol

js实现轮播图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding:0; 10 } 11 .carousel{ 12 margin:0 aut

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

原生js简单轮播图 代码

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

js网站轮播图怎么做如何做?鸡哥教你简单制作效果炫酷

日了狗啦,刚刚鸡哥辛苦码了那么多字全丢了又要重新写,这是第二遍写了...今天鸡哥给小白写个不需要写js原生代码,只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图,当然js原生代码写着也不算很繁琐,但是有些浪费时间,更何况很多人并不会用js直接写包括鸡哥,当年在学校还是研究过一段时间js的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快. 唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left

用js实现轮播图

昨天一个朋友让我用js帮他做一个简单的轮播图,我本身就是菜鸟一个,js学得不怎么样,加上好久没敲代码,简直一头雾水,还好搞了将近一个小时终于搞定.今天有时间记录一下,分享给需要的朋友. 实现思路:轮播图其实就是一个定时器,所以我们只需要定时改变当前位置的图片即可.根据这一点实现起来就很简单了,下面直接上代码. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

手把手原生js简单轮播图

在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用面向过程函数式编程去实现,相对于面向对象设计模式,代码难免会显得臃肿冗余.但没有面向对象的抽象却很适合新手理解与学习.已经在BAT的同学看到希望少喷点.另外可以多提意见. 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过