php制作图片轮播_JavaScript_jQuery制作简洁的图片轮播效果，演示图： 核心代码： $ - phpStudy...

jQuery制作简洁的图片轮播效果

演示图：

核心代码：

$(document).ready(function(){

var $iBox = $('.imgBox'),

$iNum = $('.imgNum'), //缓存优化

indexImg = 1, //初始下标

totalImg = 4, //图片总数量

imgSize = 300, //图片尺寸 宽度

moveTime = 1100, //切换动画时间

setTime = 2500, //中间暂停时间

clc = null;

function moveImg(){

if(indexImg != totalImg){

$iBox.animate({

left: -(indexImg*imgSize) + 'px'

}, moveTime);

$iNum.removeClass('mark-color')

.eq(indexImg)

.addClass('mark-color');

indexImg++;

}

else{

indexImg = 1;

$iNum.removeClass('mark-color')

.eq(indexImg - 1)

.addClass('mark-color');

$iBox.animate({

left: 0

}, moveTime);

}

}

$iNum.hover(function(){

$iBox.stop(); //结束当前动画

clearInterval(clc); //暂停循环

$iNum.removeClass('mark-color');

$(this).addClass('mark-color');

indexImg = $(this).index();

$iBox.animate({

left: -(indexImg*imgSize) + 'px'

}, 500);

},function(){

clc = setInterval(moveImg, setTime);

});

clc = setInterval(moveImg, setTime);

});

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

设置oralce自动内存管理执行步骤

servlet实现文件下载的实用类分享

javascript原生和jquery库实现iframe自适应高度和宽度

Java设计模式之解释器模式(Interpreter模式)介绍

C# MeasureString测量字符串函数的使用方法

js常用数组操作方法简明总结

深入解析C++设计模式编程中解释器模式的运用

sqlserver登陆后报不能为空不能为null的错误

基于Fedora14下自带jdk1.6版本 安装jdk1.7不识别的解决方法

js调试工具console.log()方法查看js代码的执行情况

javascript继承机制实例详解

PHP批量删除、清除UTF-8文件BOM头的代码实例

javascript查询字符串参数的方法

使用C语言的fork()函数在Linux中创建进程的实例讲解