jquery手写轮播图_jquery 轮播图怎么写

jquery轮播图的实现方法：首先创建一个放置的盒子“p.focus”；然后将overflow设置为hidden；接着通过javascript实现点击左右翻页切换图片的功能即可。

本教程操作环境：windows7系统、jquery1.10.0版本，该方法适用于所有品牌电脑。

jQuery实现轮播图效果

许多电商网站或者门户网站上都会有一个焦点图自动轮播的广告，下面将亲自用jQuery实现一个这个效果。

主要有三个功能需要实现：

1. 点击左右翻页，会切换图片

2. 点击下方导航按钮，会显示该位置上的图片

3. 鼠标移出所在区域，左右翻页按钮消失，图片自动轮播

HTML编写

首先需要一个放置的盒子p.focus，这个盒子的宽度和高度应该和每一张图片大小保持一致，同时要将overflow设置为hidden。放图片的宽度为所有图片的总宽度，通过改变盒子的left属性来实现图片的切换。由于在点击到最后一张图片时再点下一张需要跳转到第一张图片实现无限滚动的效果，所以在一头一尾分别再添加一张图片。

可以看到如果将p.focus的overflow属性注释掉以后，图片时平铺在整个页面上的。

CSS编写

由于需要改变图片的left属性，所以要将其position设置为absolute。左右翻页按钮再鼠标移动到