原生js和jquery实现图片轮播特效_jquery

（1）首先是页面的结构部分

对于我这种左右切换式

1.首先是个外围部分（其实也就是最外边的整体wrapper)

2.接着就是你设置图片轮播的地方（也就是一个banner吧）

3.然后是一个图片组（可以用新的div 也可以直接使用 ul-->li形式）

4.然后是图片两端的左箭头和右箭头
5.然后是一个透明背景层，放在图片底部

6.然后是一个图片描述info层，放在透明背景层的左下角（div 或 ul-->li)

7.然后是一个按钮层，用来定位图片组的index吧,放在透明背景层的右下角(div 或 ul-->li)

由此，可以先构造出html结构

 
 
 

 

 

 

 

 
 
 
 
 
 
puss in boots1
 
puss in boots2
 
puss in boots3
 
puss in boots4
 
puss in boots5
 
 
 
1
 
2
 
3
 
4
 
5
 
 
 

相对于之前，知识增多了两个箭头img标签

（2）CSS样式部分（图片组的处理）跟淡入淡出式就不一样了

淡入淡出只需要显示或者隐藏对应序号的图片就行了，直接通过display来设定

左右切换式则是采用图片li 浮动，父层元素ul 总宽为总图片宽，并设定为有限banner宽度下隐藏超出宽度的部分

然后当想切换到某序号的图片时，则采用其ul 定位 left样式设定相应属性值实现

比如显示第一张图片初始定位left为0px, 要想显示第二张图片则需要left:-400px 处理

（3）页面基本已经构建好久可以进行js的处理了

一、jQuery方式

照常先说jq处理

1.全局变量等

2.自动切换定时器处理

3.为左右箭头添加事件处理

左箭头

右箭头

其中autoChangeAgain()就是一个重置定时器函数

其中changeTo()就是一个图片切换的处理函数

每传入一个图片序号，则按理进行goLeft

4.为右下角的那几个li 按钮绑定事件处理

jq就是这样，简便，原生代码量就有些多了

完整代码

 
 
 
 

 

 

 

 

 
 
 
 
 
 
puss in boots1
 
puss in boots2
 
puss in boots3
 
puss in boots4
 
puss in boots5
 
 
 
1
 
2
 
3
 
4
 
5
 
 
 
 
 

二、js 原生实现

js原生大概也就是模拟jq的实现思路

1.全局变量等

2.自动切换定时器处理

同样的，有一个重置定时器的函数

3.因为有一些class呀，所以来几个class函数的模拟也是需要的

4.要左右切换，就得模拟jq的animate-->left .

我的思路就是动态地设置element.style.left 进行定位。因为要有一个渐进的过程，所以加上的一点点阶段处理。

定位的时候left的设置也是有点复杂的..要考虑方向等情况

上头也看到了，我初始了left的值为0px

我试过了，如果不初始或者把初始的left值写在行内css样式表里边，就总会报错取不到

所以直接在js中初始化或者在html中内嵌初始化也可。

5.接下来就是切换的函数实现了，比如要切换到序号为num的图片

6.然后再给左右箭头还有右下角那堆index绑定事件处理

7.最后的最后，没啥了. 噢好像还要调用一下下那个 addEvent() ..

完整代码 代码量有些冗杂..

 
 
 
 

 

 

 

 

 
 
 
 
 
 
puss in boots1
 
puss in boots2
 
puss in boots3
 
puss in boots4
 
puss in boots5
 
 
 
1
 
2
 
3
 
4
 
5
 
 
 
 

以上所述就是本文的全部内容了，希望大家能够喜欢。