JQuery简易轮播图案例

功能介绍

• 图片的自动轮换。
• 鼠标悬浮图片时停止动画。
• 单击左右按钮切换下一张图片。

代码实现

• 图片自动轮换

var index=0;time = setInterval(function (e) {$(\"li\").eq(index).fadeIn();$(\"li\").eq(index).siblings().fadeOut();index++;if (index == 3) {index = 0;}}, 1000);

• 鼠标悬浮停止轮换，左右按钮出现

$(\".main\").mouseenter(function (e) {clearInterval(time);$(\".btn\").fadeIn();}

• 单击左按钮时

$(\".left\").click(function () {$(\"li\").eq(index).fadeIn();$(\"li\").eq(index).siblings().fadeOut();index--;if (index == -1) {index = $(\".li\").length;}clearInterval(time);});

• 单击右按钮时

$(\".right\").click(function () {console.log(index);$(\"li\").eq(index).fadeIn();$(\"li\").eq(index).siblings().fadeOut();index++;if (index == 3) {index = 0;}clearInterval(time);});