基于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 语法集锦 脚本之家基础推荐
Nov 15 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
js实现简单进度条效果
Mar 25 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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环境搭建教程
2016/07/16 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
创联软件面试题笔试题
2012/10/07 面试题
毕业生个人投资创业计划书
2014/01/04 职场文书
班级聚会策划书
2014/01/16 职场文书
英文留学推荐信范文
2014/01/25 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
2014年档案室工作总结
2014/12/01 职场文书
2014年应急工作总结
2014/12/11 职场文书
公积金具结保证书
2015/05/11 职场文书
刑事上诉状范文
2015/05/22 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
简单介绍Python的第三方库yaml
2021/06/18 Python