Jquery实现图片左右自动滚动示例


Posted in Javascript onSeptember 25, 2013
<!DOCTYPE HTML> 
<html> 
<head> 
<title>基于jQuery的控制左右滚动效果_自动滚动版本</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<style> body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.8em} 
div,ul,li,ol,img{margin:0;padding:0} 
h1{font-size:1em; font-weight:normal;} 
h1 a{background:#CFF; padding:2px 3px; text-decoration:none;} 
h1 a:hover{background:#eee; text-decoration:underline} 
h2,h3{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto; position:relative} 
h3{color:#888; font-weight:bold} 
ul,li,ol{list-style:none} 
.ibox{width:850px; height:210px; background:#ddd; margin:1em auto; border:1em solid #ddd; position:relative; overflow:hidden} 
.ibox .showbox{position:absolute;left:0;width:2550px; height:170px; background:#fff} 
.ibox .showbox ul li{float:left;margin:7px} 
.ibox .showbox ul li img{width:150px; height:150px; border:3px solid #a40000} 
.ibox span{position:absolute;padding:2px 5px; background:#fff; cursor:pointer;} 
.ibox span.pre{left:10px; bottom:0} 
.ibox span.next{right:10px; bottom:0} 
.ibox span.num{right:45%; bottom:0; background:#ddd;line-height:18px;} 
.ibox span.num li{display:inline;margin:0 5px; padding:1px 5px; line-height:18px} 
.ibox span.num .numcur{background:#a40000; color:#fff} 
</style> 
<script> 
$(function(){ 
//@Mr.Think***变量 
var $cur = 1;//初始化显示的版面 
var $i = 5;//每版显示数 
var $len = $('.showbox>ul>li').length;//计算列表总长度(个数) 
var $pages = Math.ceil($len / $i);//计算展示版面数量 
var $w = $('.ibox').width();//取得展示区外围宽度 
var $showbox = $('.showbox'); 
var $num = $('span.num li') 
var $pre = $('span.pre') 
var $next = $('span.next'); 
var $autoFun; 
//@Mr.Think***调用自动滚动 
autoSlide(); 
//@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'); //为当前点击加上高亮样式,并移除同级元素的高亮样式 
} 
}); 
//@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, 4000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效 
} 
//@Mr.Think***清除自动滚动 
function clearAuto(){ 
clearTimeout($autoFun); 
} 
}); 
</script> 
</head> 
<body> 
<div class="ibox"> 
<div class="showbox"> 
<ul> 
<li><img src="//img.jbzj.com/demoimg/201007/f8a9dd53720bf31b5917915e8222c27370a3681c_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/68e9a7a8476e26a1022fa5e39ccdda669a5d4f08_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/20417dfc945bae6c720a660625e9652a154c2c94_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/f4a9f29299f3dba6e7af0ac3c5aff93e01f874d3_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/ca6f0c9ac0c6e3bfce827cd92833e1db620b6377_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/809fcfbb8a1f58d1d47a760fd4283556cce201ef_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/56d1b9aaff5b424f1cdb08b80544d5150839b4de_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/15a1d7982c49b0e638ae3340cf86dc4469f955cc_m.jpg" alt="demo" title="demo" /></li> 
<li><img src="//img.jbzj.com/demoimg/201007/49d6ae8901500f473a2e3e58e5b5ddc0e788bc9d_m.jpg" alt="demo" title="demo" /></li> 
</ul> 
</div> 
<span class="pre">«向左滚动</span> 
<span class="next">向右滚动»</span> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
Javascript中的变量使用说明
May 18 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
浅析node.js的模块加载机制
May 25 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
vue 如何使用递归组件
Oct 23 Javascript
jquery实现加载等待效果示例
Sep 25 #Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 #Javascript
jquery实现table鼠标经过变色代码
Sep 25 #Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 #Javascript
仿百度的关键词匹配搜索示例
Sep 25 #Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 #Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 #Javascript
You might like
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
Python中实现结构相似的函数调用方法
2015/03/10 Python
python将字符串转换成数组的方法
2015/04/29 Python
深入理解Python中装饰器的用法
2016/06/28 Python
Python开发的HTTP库requests详解
2017/08/29 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
python pygame实现五子棋小游戏
2020/10/26 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
高中生学习总结的自我评价范文
2013/10/13 职场文书
总经理职责范文
2013/11/08 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
设计专业自荐信
2014/06/19 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
中秋联欢会主持词
2015/07/04 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
创业计划书之农家乐
2019/10/09 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫