- 浏览: 333111 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992:
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992:
就是没有返回顶部的按钮,这个页面、、
[JS代码库] -
幻紫1992:
很受用,O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco:
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520:
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
1、效果及功能说明
图片切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片显示隐藏
2、实现原理
首先是让图片在一个带有实现事件的div内显示出来,让其他图片进行隐藏,定义一个轮播的滚动效果结合时间上的控制,让图片在规定的时间里进行轮换,轮换掉的图片进行隐藏,定义按钮的点击事件让按钮点击后改变背景颜色或者是轮播完的按钮消除背景颜色,让按钮编号分别对应三张图片让点击几号按钮是显示哪张图片,在设定当鼠标没有点击和触碰图片或者按钮下多少秒后回复正常播放,在显示的div两侧的左右按钮上在定义一个点击事件,让这个事件带有可以马上轮播掉当前的图片,替换的图片是按照当前图片的左右来计算,在点击任何按钮后轮播停止,在过去3秒后从新开始轮播效果
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
图片切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片显示隐藏
2、实现原理
首先是让图片在一个带有实现事件的div内显示出来,让其他图片进行隐藏,定义一个轮播的滚动效果结合时间上的控制,让图片在规定的时间里进行轮换,轮换掉的图片进行隐藏,定义按钮的点击事件让按钮点击后改变背景颜色或者是轮播完的按钮消除背景颜色,让按钮编号分别对应三张图片让点击几号按钮是显示哪张图片,在设定当鼠标没有点击和触碰图片或者按钮下多少秒后回复正常播放,在显示的div两侧的左右按钮上在定义一个点击事件,让这个事件带有可以马上轮播掉当前的图片,替换的图片是按照当前图片的左右来计算,在点击任何按钮后轮播停止,在过去3秒后从新开始轮播效果
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial;} a{font-size:12px;color:#ff6600;text-decoration:none;} a:hover{color:#3366cc;} /* dlyL */ .dlyL{width:690px;height:415px;position:relative;margin:20px auto;} .dlyL b{background:url(images/icons-arrow.gif) no-repeat;} .dlyL b{width:10px;height:15px;display:block;position:absolute;top:35px;cursor:pointer;} .dlyL b.prev{left:13px;top:110px;background-position:0 0;} .dlyL b.next{right:13px;top:110px;background-position:-9px 0;} .dlyL div{width:620px;height:340px;margin:0 auto 9px;overflow:hidden;border:solid 1px #ddd;} .dlyL span{display:block;text-align:center;} .dlyL span i{padding:2px 5px;background-color:#cbcbcb;color:#fff;margin:auto 1px;cursor:pointer;} .dlyL span i.current{background-color:#ef7000;} .dlyL h4{font-weight:normal;text-align:center;padding-top:8px;} </style> </head> <body> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ var $index = 0; var $nav = $(".dlyL span i"); var $text = $(".dlyL h4 a"); var $pics = $(".dlyL div a"); /*0代表分页的个数 然后就爱那个dlyL 的 span i h4 a div a 分别放去其中*/ $(".dlyL span i").click(function(){ /*是用来区分按钮的点击事件*/ var $self = $(this); var $index = $nav.index($self); showMzin($index); /*三个是将按钮的 点击后的显示那张图 然后继续效果 和 启动前面两个效果设定好 */ $(".dlyL b.next").click(function(){ /*设点向左边的按钮的点击事件*/ if($index<3){/* 设置4个显示分页 */ $index++ } /*如果图片大于3就+1*/ else if($index==3){ $index=0 } /*如果图片等于3就回到0号图片*/ showMzin($index); /*启动效果*/ }); $(".dlyL b.prev").click(function(){ /*设点向右边的按钮效果*/ if($index>0){ $index-- } /*如果图片小于0就-1*/ else if($index==0){ $index=3 } /*如果如片等于0的话就回到3*/ showMzin($index); /*启动效果*/ }); }).eq(0).trigger("click"); /*当页面加载成功后从0号图片开始执行效果*/ function showMzin(i){ /*把执行的效果放进来*/ $pics.hide(), /*按照前面的效果变化图片*/ $pics.eq(i).show(), /*将对应的图片放进应该显示的窗口*/ $text.hide(), /*管理哪张图需要在下方出现什么样的文字*/ $text.eq(i).show(), /*根据前面的效果来显示出文字*/ $nav.removeClass("current"), /*当图片消失的时候下面的按钮号跟着失去底色*/ $nav.eq(i).addClass("current"); /*当显示图片时下面的按钮号的底色更换*/ } DLYTime =setInterval(function(){ $(".dlyL b.next").trigger("click"); }, 3000); /*开始根据上面的代码开始实现 相隔的时间为3秒钟*/ $(".dlyL").mouseover(function(){ if(DLYTime){clearInterval(DLYTime);} }); /*当点击 下面的数字按钮还是左右按钮后 还是根据上面的效果来从新计时*/ $(".dlyL").mouseout(function(){ DLYTime =setInterval(function(){ $(".dlyL b.next").trigger("click"); },3000); /*当完成了一轮新的效果后 在点击按钮还是按照3秒来计时*/ }); }); </script> <div class="dlyL"> <b class="prev"></b> <b class="next"></b> <div> <a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化" src="images/965e7aec8b1d0d112be431a8f54df0cb.jpg" /></a> <a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3" src="images/6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg" /></a> <a href="http://www.17sucai.com/"><img width="620" height="340" alt="用div+css制作一个CSS3的泡泡动画按钮非常漂亮" src="images/df8440960f45b0ad68fe4d1c684e2acc.jpg" /></a> </div> <span> <i>1</i><i>2</i><i>3</i> </span> <h4> <a href="http://www.17sucai.com/">jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化</a> <a href="http://www.17sucai.com/">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a> <a href="http://www.17sucai.com/">用div+css制作一个CSS3的泡泡动画按钮非常漂亮</a> </h4> </div><!--dlyL end--> </body> </html>
发表评论
-
Zepto
2015-08-15 13:49 1207Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 740//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 541Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 487Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 856首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2717Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 687特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14717流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6217首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1349通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 661一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 890<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7351. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 718一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 515看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 830最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 609最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 409做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 670在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 738<object width="940&qu ...
相关推荐
用jquery制作图片切换效果,图片淡隐淡现带左右按钮和分页索引图片控制,鼠标点击按钮或图片显示大图,大图淡隐淡现切换播放,提高用户体验设计是jquery 图片切换中非常常用的jquery 特效。
jquery带分页数字左右按钮控制单排图片切换 jquery带分页数字左右按钮控制单排图片切换 jquery带分页数字左右按钮控制单排图片切换
带左右按钮控制图片切换jQuery幻灯片
jquery图片滚动制作一个带有选项卡切换滚动效果且带有左右按钮控制的图片左右滚动焦点图。
Jquery左右按钮控制图文切换代码是一款左右按钮控制图片和文字切换特效。
jQuery实现的带数字左右按钮控制图片切换特效源码.zip
jQuery按钮控制叠加图片切换代码,带左右按钮,旋转木马切换效果。
jquery全屏图片滑动切换带左右按钮控制图片滑动切换效果代码
这是一款带有左右箭头按钮控制的jQuery图片滚动切换特效,代码简洁易用,图片滚动时有动感效果。
jQuery带数字左右按钮控制图片切换,带左右箭头按钮,并且左侧箭头带有翻页数字显示。
html5图片切换 jquery.tiles图片切换插件按钮控制.
jquery图片滚动QQ商城带左右按钮控制焦点图片切换滚动
jquery css3图片动画幻灯片左右按钮控制图片动画切换效果 jquery css3图片动画幻灯片左右按钮控制图片动画切换效果 jquery css3图片动画幻灯片左右按钮控制图片动画切换效果
jquery源代码在手机中显示按钮控制图片幻灯片切换 jquery源代码在手机中显示按钮控制图片幻灯片切换 jquery源代码在手机中显示按钮控制图片幻灯片切换
jQuery响应式左右按钮控制图片动画切换效果
jQuery左右按钮控制带缩略图的图片切换代码
jquery tab易迅网焦点图片全屏滑动切换支持按钮控制图片...