- 浏览: 340429 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (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 1231Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 767//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 579Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 530Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 876首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2735Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 710特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14747流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6262首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1376通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 692一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 912<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7661. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 749一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 540看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 867最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 637最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 431做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 694在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 768<object width="940&qu ...
相关推荐
用jquery制作图片切换效果,图片淡隐淡现带左右按钮和分页索引图片控制,鼠标点击按钮或图片显示大图,大图淡隐淡现切换播放,提高用户体验设计是jquery 图片切换中非常常用的jquery 特效。
总结起来,制作一个jQuery图片切换插件,关键在于理解jQuery的选择器、方法和事件绑定机制,以及如何利用CSS和JavaScript协同创建动态效果。通过以上步骤,我们可以创建一个功能齐全、用户友好的图片滚动切换组件,...
"jQuery左右按钮与选项卡按钮控制图片左右滚动"是一个基于jQuery实现的图片滚动插件,它结合了选项卡功能,允许用户通过点击左右按钮或选项卡来切换图片。以下是关于这个主题的详细知识点: 1. **jQuery库**:...
本文将深入探讨如何使用jQuery库来实现一个带显示隐藏左右按钮的幻灯片效果,帮助你提升网站的视觉吸引力。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在创建幻灯片...
该资源是一个基于jQuery实现的图片切换幻灯片插件,主要功能是通过左右按钮来控制图片的前后切换,为网站的首页或者产品展示区域提供动态的视觉效果。在这个压缩包中,包含了两个主要文件:一个JavaScript文件(可能...
"jquery带分页数字左右按钮控制单排图片切换"是一个使用jQuery库实现的特定功能,它结合了分页和导航按钮,使得用户可以通过点击数字分页或左右箭头来浏览一排图片。这个功能对于产品展示、图片画廊或任何需要滚动...
本示例将探讨如何使用jQuery实现一个带有左右按钮的图片切换效果。jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理以及动画制作等任务。 首先,我们需要在HTML中设置基本的结构。创建一个包含图片...
本教程将深入讲解如何使用jQuery来创建一个具有左右按钮控制的图片滑动效果。这个功能通常用于展示产品图片或创建轮播图,能够提升用户体验并增加网站的互动性。 首先,我们需要在HTML文件中设置基本结构。创建一个...
在本项目中,我们主要探讨的是使用jQuery库来实现一种图片切换效果,即通过按钮控制叠加图片的旋转木马切换。这种效果常用于创建交互式的图片相册或展示区域,可以提升用户体验,使得用户能够方便地浏览一组图片。...
该资源是一个基于jQuery库开发的图片切换特效代码,主要用于网页中的图像展示,具有左右按钮控制以及数字指示器功能。在网页设计和开发中,这样的图片轮播插件能够提升用户体验,使得用户可以方便地浏览一组相关的...
本特效以"jQuery左右箭头按钮控制图片滚动切换"为主题,旨在帮助开发者创建一个用户友好的图片浏览体验,通过点击左右箭头实现图片的平滑滚动。 首先,我们要了解这个特效的核心是使用jQuery的事件监听和动画功能。...
在本案例中,我们探讨的是如何使用jQuery根据图片个数动态地显示或隐藏左右滚动按钮。这通常应用于图片轮播插件或者画廊组件,为用户提供浏览多张图片的功能。 首先,我们需要理解基本的HTML结构。一个简单的图片...
在提供的文件名"soChange"中,我们可以推断这可能是一个具体的jQuery图片切换插件。这个插件可能包含了上述提到的所有功能,并且进行了封装,方便开发者在项目中快速集成和自定义。 ### 使用与自定义 在实际应用中...
本篇文章将详细解析如何利用jQuery来创建一个带数字左右按钮控制的图片切换功能。 首先,我们需要理解jQuery的基本使用。jQuery的核心理念是“Write Less, Do More”,它通过简洁的语法封装了大量DOM操作、事件处理...
本主题聚焦于"jquery图片左右滚动按钮控制图片左右滚动效果代码",这是一种常见的网页交互设计,常见于产品展示或图片轮播场景。通过使用jQuery,我们可以实现用户点击左右按钮来平滑地滚动图片,提升用户体验。 ...
这个代码实现的功能是通过jQuery库,配合左右按钮来控制全屏图片的滑动切换,使得用户可以方便地浏览一系列全屏展示的图片。 首先,我们需要理解jQuery库的基础知识。jQuery是一个轻量级、高性能的JavaScript库,它...
本资源"jquery左右按钮控制图文切换代码.zip"提供了一个使用jQuery实现的功能,允许用户通过点击左右按钮来切换页面上的图片和相关文字内容,这种效果常见于产品展示、相册浏览或文章阅读等场景。 首先,我们来理解...
在本文中,我们将深入探讨jQuery图片切换效果的实现方法,基于提供的"jquery图片切换案例"。这九种不同的案例展示了如何使用jQuery库轻松地创建动态、吸引人的图片展示,为网页设计增添更多互动性。 首先,jQuery是...
4. 图片切换效果:使用jQuery的动画效果(如fadeIn/fadeOut)平滑地过渡到下一张图片。 5. 索引更新:根据当前显示的图片,同步更新索引指示器的状态。 6. 优化与兼容性处理:确保代码在不同的浏览器环境和设备上...