基于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代码
Aug 13 Javascript
javascript js cookie的存储,获取和删除
Dec 29 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
three.js如何实现3D动态文字效果
Mar 03 Javascript
JS ES6异步解决方案
Apr 29 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
python笔记(2)
2012/10/24 Python
python求pi的方法
2014/10/08 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
两年的个人工作自我评价
2014/01/10 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
销售团队口号大全
2014/06/06 职场文书
金融与证券专业求职信
2014/06/22 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
护士2014年终工作总结
2014/11/11 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
公司岗位说明书
2015/10/08 职场文书
公司晚会主持词
2019/04/17 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
详解python字符串驻留技术
2021/05/21 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis