jQuery制作简洁的图片轮播效果
更新时间:2015年04月03日 16:34:18 投稿:hebedich
这篇文章主要介绍了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); });
以上所述就是本文的全部内容了,希望大家能够喜欢。
相关文章
jQuery实现table中的tr上下移动并保持序号不变的实例代码
下面小编就为大家带来一篇jQuery实现table中的tr上下移动并保持序号不变的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-07jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
这篇文章主要介绍了jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可,文中通过实例代码给大家详细介绍,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
这篇文章主要介绍了easyUi 打开对话框后控件赋值,以及赋值后不显示的问题解决办法,解决方法非常简单,只需要将赋值语句修改下就好,下面小编给大家简单介绍下,需要的朋友参考下2017-01-01jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
这篇文章主要介绍了jQuery将所有被选中的checkbox某个属性值连接成字符串的方法,可实现将选中属性值连接成字符串的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01基于jQuery UI CSS Framework开发Widget的经验
jQuery UI CSS Framework是jQuery UI中的一个样式框架,可以利用jQuery Theme roller 来生成自己想要的css样式效果。我们可以利用jQuery UI的一些框架来开发出基于jQuery UI CSS Framework效果的插件来。2010-08-08
最新评论