会员
周边
众包
新闻
博问
闪存
赞助商
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
博客园
首页
新随笔
联系
订阅
管理
单张图片轮换
单独图片轮换,点击左右按钮,实现翻页效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>单独图片轮换 - 豪情</title> <style type="text/css"> *{margin:0;padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#000;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} a:focus,input,textarea{outline-style:none;} textarea{resize:none} a{color:#0a8cd2;text-decoration:none;} a:hover{color:#f60;text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .none{display:none} .demo{width:180px;height:210px;margin:40px auto;background:#fff;padding:25px;border:2px solid #ccc;border-radius:5px;} .scrollBox{display:inline;float:left;height:223px;position:relative;width:180px;overflow:hidden;} .prev,.next{background:url(//images0.cnblogs.com/blog/100150/201305/01234427-d9c492e118d040ffb59ec9d80955edbb.png) 0 0 no-repeat;} .prev{background-position:0 0;bottom:7px;cursor:pointer;display:inline-block;height:13px;position:absolute;right:20px;width:15px;z-index:99;} .next{background-position:-22px 0;bottom:7px;cursor:pointer;display:inline-block;height:13px;position:absolute;right:0;width:15px;z-index:99;} .control{display:inline;float:left;margin:0 auto;width:180px;} .control div{float:left;} #control_scroll{height:223px;overflow:hidden;position:relative;width:180px;} .pic{position:absolute;float:left;} .pic li{display:inline;float:left;text-align:left;width:180px;} .pic li img.lbimg{height:190px;margin:0 auto 12px;overflow:hidden;width:180px;} </style> </head> <body> <!--http://sports.qq.com/photo/?pgv_ref=aio2012&ptlang=2052--> <!--http://news.qq.com/base2011/ued_scroll.js--> <div class="demo"> <div class="scrollBox"> <div id="prev" class="prev"></div> <div class="control" id="container"> <ul class="pic"> <li><a href="#"><img class="lbimg" alt="张蓝心登杂志秀美腿" src="http://img1.gtimg.com/sports/pics/hv1/235/122/1287/83718520.jpg" /><br /> 张蓝心登杂志秀美腿</a> </li> <li><a href="#"><img class="lbimg" alt="潘晓婷蕾丝装身姿动人" src="http://img1.gtimg.com/sports/pics/hv1/242/122/1287/83718527.jpg" /><br /> 潘晓婷蕾丝装身姿动人</a> </li> <li><a href="#"><img class="lbimg" alt="泛珠赛车宝贝清丽登场" src="http://img1.gtimg.com/sports/pics/hv1/249/122/1287/83718534.jpg" /><br /> 泛珠赛车宝贝清丽登场</a> </li> <li><a href="#"><img class="lbimg" alt="CBA宝贝热舞助阵" src="http://img1.gtimg.com/sports/pics/hv1/24/188/1286/83670114.jpg" /><br /> CBA宝贝热舞助阵</a> </li> <li><a href="#"><img class="lbimg" alt="徐冬冬写真姿态优雅" src="http://img1.gtimg.com/sports/pics/hv1/237/122/1287/83718522.jpg" /><br /> 徐冬冬写真姿态优雅</a> </li> </ul> </div> <div id="next" class="next"></div> </div> </div> <script type="text/javascript"> (function(window){ function id(node){ return typeof node == 'string' ? document.getElementById(node) : node; } function SingleSlide(obj){ for(var p in obj){ this[p] = id(obj[p]); } this.init.apply(this, arguments); } SingleSlide.prototype = { init : function(){ var that = this, timer = null; this.oUl = this.container.getElementsByTagName('ul')[0]; this.aLi = this.oUl.getElementsByTagName('li'); this.iMaxWidth = this.aLi[0].offsetWidth; this.iNow = 0; // 当前标记 var bigBox = this.container.parentNode; this.oUl.innerHTML += this.oUl.innerHTML; this.oUl.style.width = this.aLi[0].offsetWidth * this.aLi.length + 'px'; timer = setInterval(function(){ that.auto(that, that.oUl); }, 2000); this.prevBtn.onclick = function(){ that.prev(that, that.oUl); } this.nextBtn.onclick = function(){ that.auto(that, that.oUl); } bigBox.onmouseover = function(){ clearInterval(timer); } bigBox.onmouseout = function(){ timer = setInterval(function(){ that.auto(that, that.oUl); }, 2000); } }, auto : function(obj, ul){ obj.iNow++; if(obj.iNow >= obj.aLi.length){ obj.iNow = 0; } obj.move(ul, -obj.iNow * obj.iMaxWidth); }, prev : function(obj, ul){ obj.iNow--; if(obj.iNow <= -1){ obj.iNow = obj.aLi.length - 1; } obj.move(ul, -obj.iNow * obj.iMaxWidth); }, move : function(obj, end){ var that = this, iSpeed = 0; clearInterval(obj.timer); obj.timer = setInterval(function(){ iSpeed = (end - obj.offsetLeft) / 5; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); obj.style.left = obj.offsetLeft + iSpeed + 'px'; }, 30); } } new SingleSlide({ container : 'container', prevBtn : 'prev', nextBtn : 'next' }); }(window)); </script> </body> </html>
运行代码
分类:
JavaScript
好文要顶
关注我
收藏该文
微信分享
豪情
粉丝 -
3291
关注 -
43
+加关注
2
0
升级成为会员
«
上一篇:
2个有焦点时文字消失或变淡效果
»
下一篇:
如何在Webstorm/Phpstorm中设置连接FTP,并快速进行文件比较,上传下载,同步等操作
posted @
2013-05-01 23:42
豪情
阅读(
2215
) 评论(
1
)
编辑
收藏
举报
刷新页面
返回顶部
登录后才能查看或发表评论,立即
登录
或者
逛逛
博客园首页
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
编辑推荐:
·
为什么说在企业级应用开发中,后端往往是效率杀手?
·
用 C# 插值字符串处理器写一个 sscanf
·
Java 中堆内存和栈内存上的数据分布和特点
·
开发中对象命名的一点思考
·
.NET Core内存结构体系(Windows环境)底层原理浅谈
阅读排行:
·
为什么说在企业级应用开发中,后端往往是效率杀手?
·
DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
·
本地部署DeepSeek后,没有好看的交互界面怎么行!
·
趁着过年的时候手搓了一个低代码框架
·
推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
公告
昵称:
豪情
园龄:
15年2个月
粉丝:
3291
关注:
43
<
2013年5月
>
日
一
二
三
四
五
六
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
搜索
我的标签
Javascript高程第二版--笔记
(12)
javascript
(9)
zen coding
(5)
WebStorm
(4)
css
(3)
精通javascript
(3)
JavaScriptDOM高级程序设计
(2)
资源
(2)
网址导航
(2)
zp
(1)
更多
随笔分类
(339)
CSS(32)
JavaScript(159)
Jquery(35)
Month(9)
Other(53)
PHP(3)
SublimeText(4)
Tool(13)
UI(12)
Vim(4)
Vue(2)
WebStorm/PhpStorm(13)
随笔档案
(337)
2019年5月(2)
2016年2月(1)
2016年1月(1)
2015年11月(1)
2015年10月(2)
2015年9月(3)
2015年7月(1)
2015年6月(1)
2015年5月(1)
2015年4月(3)
2015年2月(1)
2015年1月(5)
2014年12月(4)
2014年11月(8)
2014年10月(8)
2014年9月(1)
2014年6月(1)
2014年3月(9)
2014年1月(1)
2013年12月(3)
2013年5月(1)
2013年4月(4)
2013年3月(8)
2013年1月(1)
2012年12月(4)
2012年11月(1)
2012年10月(2)
2012年8月(4)
2012年7月(3)
2012年6月(1)
2012年4月(2)
2012年3月(8)
2012年2月(3)
2012年1月(1)
2011年12月(6)
2011年11月(1)
2011年7月(3)
2011年6月(5)
2011年5月(1)
2011年4月(1)
2011年3月(12)
2011年2月(1)
2011年1月(2)
2010年12月(7)
2010年11月(2)
2010年10月(5)
2010年9月(7)
2010年8月(14)
2010年7月(10)
2010年6月(14)
2010年5月(46)
2010年4月(19)
2010年3月(19)
2010年2月(7)
2010年1月(7)
2009年12月(48)
更多
link
豪情-Java
james
stevenlevithan
paulirish--jquery team
我是程序员
Aaron
VaJoy Larn
阅读排行榜
1. 1. web前端开发分享-css,js入门篇(168093)
2. web前端开发分享-目录(120219)
3. 如何在Webstorm/Phpstorm中设置连接FTP,并快速进行文件比较,上传下载,同步等操作(113109)
4. 前端开发利器webStorm 3.0配置使用(105929)
5. 4. web前端开发分享-css,js工具篇(94347)
6. 在sublime-text中设置浏览器预览(83298)
7. 我们前端跟后端是怎么合作的(80424)
8. JS的构造函数(74044)
9. 超强JavaScript编辑器webstorm主题(theme)(68477)
10. 我们前端是怎么找到工作的(66015)
评论排行榜
1. JS高级前端开发群加群说明及如何晋级(67)
2. 豪情-2015年阅读书籍分享[上](57)
3. 网上分享知识和帮助他人,自己有什么收获?(53)
4. 经典黑色--网站管理界面(38)
5. 我们前端是怎么找到工作的(34)
6. 豪情-关于生活工作学习之感悟-第一篇(33)
7. 前端应聘要准备些什么样子的作品?(29)
8. css 填坑常用代码分享(29)
9. 超强JavaScript编辑器webstorm主题(theme)(29)
10. 年后跳槽如何准备?(28)
推荐排行榜
1. 我们前端是怎么找到工作的(77)
2. web前端开发分享-目录(74)
3. 豪情-关于生活工作学习之感悟-第一篇(54)
4. 年后跳槽如何准备?(53)
5. css 填坑常用代码分享(51)
最新评论
1. Re:超强JavaScript编辑器webstorm主题(theme)
现在还能用吗?在win10上?
--香荣如梦
2. Re:豪情-2014年年终总结
向豪哥学习
--王小伞
3. Re:JS高级前端开发群加群说明及如何晋级
上海-时间前来报道
--你灬哪位
4. Re:6. web前端开发分享-css,js移动篇
感谢
--不爱学习不爱运动
5. Re:我们前端跟后端是怎么合作的
时至今日偶然看见此片老文章,读着评论,感觉像和古人交互一样,这种感觉如同穿越一般,令人着迷啊。
--LBAMSG_1
点击右上角即可分享
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!