基于jQuery的可以控制左右滚动及自动滚动效果的代码


Posted in Javascript onJuly 25, 2010

分享一个控制左右滚动及自动滚动的样例, 昨晚花了两个多小时, 忍受着悍蚊的叮咬, 汗水的侵袭, 一行行的敲出来的血汗代码. 哈哈.
封装了两种模式: 点击滚动版本DEMO 自动滚动版本DEMO,源码中有详细注释.
思路:
点击滚动模式下,是为点击(向前/向后/数字)添加click事件,通过控制展示区块left值实现切换.
1.向前(左):当在第一个版面时,滚动到最后一个页面,否则,累加left值,向前滚动;
2.向后(右):当在最后一个版面时,滚动到第一个页面,否则,累减left值,向后滚动;
3.数字点击:利用index(…)获取当前点击在数字列表中的索引值, 然后索引值为倍数为外围宽度负值.即可达到切换.
核心代码:

//@Mr.Think***向前滚动 
$pre.click(function(){ 
if (!$showbox.is(':animated')) { //判断展示区是否动画 
if ($cur == 1) { //在第一个版面时,再向前滚动到最后一个版面 
$showbox.animate({ 
left: '-=' + $w * ($pages - 1) 
}, 500); //改变left值,切换显示版面,500(ms)为滚动时间,下同 
$cur = $pages; //初始化版面为最后一个版面 
} 
else { 
$showbox.animate({ 
left: '+=' + $w 
}, 500); //改变left值,切换显示版面 
$cur--; //版面累减 
} 
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式 
} 
}); 
//@Mr.Think***向后滚动 
$next.click(function(){ 
if (!$showbox.is(':animated')) { //判断展示区是否动画 
if ($cur == $pages) { //在最后一个版面时,再向后滚动到第一个版面 
$showbox.animate({ 
left: 0 
}, 500); //改变left值,切换显示版面,500(ms)为滚动时间,下同 
$cur = 1; //初始化版面为第一个版面 
} 
else { 
$showbox.animate({ 
left: '-=' + $w 
}, 500);//改变left值,切换显示版面 
$cur++; //版面数累加 
} 
$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式 
} 
}); 
//@Mr.Think***数字点击事件 
$num.click(function(){ 
if (!$showbox.is(':animated')) { //判断展示区是否动画 
var $index = $num.index(this); //索引出当前点击在列表中的位置值 
$showbox.animate({ 
left: '-' + ($w * $index) 
}, 500); //改变left值,切换显示版面,500(ms)为滚动时间 
$cur = $index + 1; //初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1 
$(this).addClass('numcur').siblings().removeClass('numcur'); //为当前点击加上高亮样式,并移除同级元素的高亮样式 
} 
});

自动滚动模式是基于点击滚动模式加强的,无非是添加了自动滚动事件,以及当鼠标划上时清除动画事件.
这里要说明一点.DEMO演示中,为向前/向后/数字/区域都添加了当鼠标划过时都添加了清除动画事件.但是,如果你的页面中,这几个需要添加清除动画事件的都在同一个区域内,完全可以用trigger(…)模拟实现自动滚动.
还有一点,自动滚动中是用setTimeout(“fun”,interval)实现,而不用setInterval(“fun”,interval)实现. 原因在于,setInterval是在间隔时间后重复执行传入的函数,而setTimeout只在间隔时间后执行一次函数传入函数,这样即可避免第二次鼠标划入停止动画区域时不能清除动画.
核心代码:
...... 
//@Mr.Think***调用自动滚动 
autoSlide(); 
...... 
//@Mr.Think***停止滚动 
clearFun($showbox); 
clearFun($pre); 
clearFun($next); 
clearFun($num); 
//@Mr.Think***事件划入时停止自动滚动 
function clearFun(elem){ 
elem.hover(function(){ 
clearAuto(); 
}, function(){ 
autoSlide(); 
}); 
} 
//@Mr.Think***自动滚动 
function autoSlide(){ 
$next.trigger('click'); 
$autoFun = setTimeout(autoSlide, 3000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效 
} 
//@Mr.Think***清除自动滚动 
function clearAuto(){ 
clearTimeout($autoFun); 
}

更详细代码分析,请查看源码,写有详细的注释.
代码打包下载
Javascript 相关文章推荐
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
用jquery实现下拉菜单效果的代码
Jul 25 #Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 #Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 #Javascript
来自qq的javascript面试题
Jul 24 #Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 #Javascript
js获取元素在浏览器中的绝对位置
Jul 24 #Javascript
几个有趣的Javascript Hack
Jul 24 #Javascript
You might like
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
法学毕业生自荐信
2013/11/13 职场文书
生产厂长岗位职责
2014/02/21 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
董事长岗位职责
2015/02/13 职场文书
义诊活动通知
2015/04/24 职场文书
公司员工奖惩制度
2015/08/04 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技