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 相关文章推荐
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
JavaScript实现轮播图效果
Oct 30 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
舞蹈教育学专业推荐信
2013/11/27 职场文书
农林环境专业求职信
2014/03/13 职场文书
国际贸易求职信
2014/07/05 职场文书
实习护士自荐信
2015/03/25 职场文书
红色故事汇观后感
2015/06/18 职场文书
推广普通话的宣传语
2015/07/13 职场文书
大学军训心得体会800字
2016/01/11 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android