基于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面向对象编程(一) 实例代码
Jun 25 Javascript
javascript textContent与innerText的异同分析
Oct 22 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
用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实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
PHP 裁剪图片
2021/03/09 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
使用js实现数据格式化
2014/12/03 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
python实现关键词提取的示例讲解
2018/04/28 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
介绍一下JNDI的基本概念
2013/07/26 面试题
人力资源求职信
2014/05/25 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
小学教师工作总结2015
2015/04/07 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
干部培训简讯
2015/07/20 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android