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 28 Javascript
js Function类型
Dec 04 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
vue实现计步器功能
Nov 01 Javascript
浅析vue-router实现原理及两种模式
Feb 11 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
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
django缓存配置的几种方法详解
2018/07/16 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
python 绘制正态曲线的示例
2020/09/24 Python
Python Django路径配置实现过程解析
2020/11/05 Python
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
2015个人半年总结范文
2015/03/09 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS