基于jquery实现轮播图效果

本文实例为大家分享了jquery实现轮播图效果的具体代码，供大家参考，具体内容如下

轮播图左切换原理图

黄色的方框表示的是  slides ，而  slide 表示的是所有轮播图的父亲，每个灰色的方框表示的是每一个轮播图。

对于 step 1 我们首先要使用 CSS 中 overflow 属性隐藏处于 firstDiv 后的盒子，如果我们不这么做，那么很明显，后方图片会被显示出来，也就达不到我们需要的效果。

对于 step 2 我们可以把它分为以下步骤：

1、左移动所有轮播图的父亲 slide
2、将 s l i d e slideslide 中的第 一 个 儿 子 第一个儿子第一个儿子删除
3、并把第一个儿子添加到 slide 中儿子的尾部
每次点击 leftMove 按钮时重复 step 2，即可实现左移效果。

轮播图右切换原理图

rightMove 的执行步骤：

1、删除最后一个儿子
2、把最后一个儿子添加到头部
3、右移 s l i d e slideslide（即把 slide 的 left 设为 0）

实现代码

 
 
 
 
 


 <
 

 

 

 

 

 
 
 >
 
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。