JQuery图片轮换器原理
首先说下,网上找的例子全是用的ul标签实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果。利用jquery的淡入淡出函数(fadeIn和fadeOut)。废话也不多说,边上代码边讲解。最后附上demo效果地址。
先HTML布局:
<!--整体容器--> <div class="imgbox"> <!--图片列表,除第一张显示外,其余隐藏--> <ul> <li style="display: block;" title="清灵少女宛如梦境仙女"><a href="#"> <img src="http://p.dddddd.net/uploads/allimg/110927/11-11092G32227.jpg" /></a></li> <li title="美女海边性感透视装诱惑"><a href="#"> <img src="http://tu.dushiys.com/uploads/allimg/130621/1-130621145931-50.jpg" /></a></li> <li title="夏小薇:百变小魔女变身性感数码宝贝"><a href="#"> <img src="http://p.dddddd.net/uploads/allimg/130620/19-130620115013.jpg" /></a></li> <li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#"> <img src="http://imgtu.5239.com/uploads/allimg/130315/5-130315135240.jpg" /></a></li> </ul> <div class="title_bg common"><!--图片标题背景--> </div> <!--图片显示标题--> <div class="title common"></div> <!--图片序号--> <div class="pager common"> <ul> <li>4</li> <li>3</li> <li>2</li> <li style="background: #FF70Ad;">1</li> </ul> </div> </div>
CSS部分:
img{border-style:none;} .imgbox{width:530px;margin:100px;height:350px;} .imgbox img{width:530px;height:350px;} .imgbox ul{list-style-type:none;margin:0px;padding:0px;} .imgbox ul li{display:none;} .title_bg{z-index:1;background-color:#000;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;} .title{z-index:2;color:#FFF;text-indent:10px;font-size:14px;line-height:40px;} .pager{z-index:3;} .common{position:relative;height:40px;margin-top:-43px;} .pager ul{margin-top:5px;} .pager ul li{float:right;color:#FFF;font-size:15px;display:block;border:2px solid #e5eaff;width:25px;height:25px;margin-right:4px;margin-top:5px;text-align:center;line-height:25px;background-color:#6f4f67;cursor:pointer;}
脚本:
$(document).ready(function () { (new CenterImgPlay()).Start(); }); function CenterImgPlay() {
//获取轮换器列表 this.list = $(".imgbox").children(":first").children(); this.indexs = []; this.length = this.list.length; //图片显示时间 this.timer = 3000;
//图片标题 this.showTitle = $(".title"); var index = 0, self = this, pre = 0, handid, isPlay = false, isPagerClick = false; //计时器 this.Start = function () {
//计算页码的函数 this.Init(); //计时器,用于定时轮播图片 handid = setInterval(self.Play, this.timer); }; //初始化,页码的初始化 this.Init = function () { var o = $(".pager ul li"), _i; for (var i = o.length - 1, n = 0; i >= 0; i--, n++) { this.indexs[n] = o.eq(i).click(self.PagerClick); } };
//切换图片的函数 this.Play = function () { isPlay = true; index++; if (index == self.length) { index = 0; } //先淡出,在回调函数中执行下一张淡入 self.list.eq(pre).fadeOut(300, "linear", function () { var info = self.list.eq(index).fadeIn(500, "linear", function () { isPlay = false; if (isPagerClick) { handid = setInterval(self.Play, self.timer); isPagerClick = false; } }).attr("title"); //显示标题 self.showTitle.text(info); //图片序号背景更换 self.indexs[index].css("background-color", "#FF70Ad"); self.indexs[pre].css("background-color", "#6f4f67"); pre = index; }); }; //图片序号点击 this.PagerClick = function () { if (isPlay) { return; } isPagerClick = true; clearInterval(handid); var oPager = $(this), i = parseInt(oPager.text()) - 1; if (i != pre) { index = i - 1; self.Play(); } }; };
轮播的脚本是个人的一点小习惯,一般不轻易向jquery中写入扩展函数.诸位莫要在意。
通过以上的代码,实现轮播的核心主要是对jquery的fadeIn和fadeOut函数的调用,另外考察的就是CSS布局的功力了。
在上面显示图片标题的地方不能用绝对定位,于是用的relative定位,这个地方是布局的核心部分,否则无法将标题和图片序号放在图片之上。
title_bg 这个类及对应的div主要是为了实现标题的背景色透明,因为直接在标题上设置背景色透明,会造成文字也是有透明度的。
JQuery图片轮换器原理相关推荐
- 图片在线预览html,Viewer.js – 强大的JS/jQuery图片查看器
Viewer.js – 强大的JS/jQuery图片查看器 分类:代码 日期:2016-08-04 点击(282,284) 下载(1) 来源:未知 收藏 简介 Viewer.js 是一款强大的图片查看 ...
- 简单的图片轮播器(一):一个关于仿flash的图片轮换器
仿flash的图片轮换器 web小渣渣,最近在网上看了一个n年前的视屏(地址这里)照着视屏的代码参照网上的写了一波,发一篇博客记录一波 学习历程 最终效果图: 最终代码如下: tuPianLunHua ...
- 强大的jQuery图片查看器插件Viewer.js
简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...
- Viewer.js Javascript/jQuery图片查看器
简介 Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Viewer.js 有以下特点: ...
- jQuery图片播放器 1.3
采用jQuery实现的一款使用简单.具有多播放效果的网页图片播放器(jquery.fn.imgplayer),适合UI设计或对前端技术感兴趣的人群. 特性 使用简单,仅需您知道HTML知识: 实现代码 ...
- html5 photo gallery,jquery图片查看器 jquery-photo-gallery
bug:滚轮缩放,底层页面显示高度也会跟着移动: esc.上.下.左.右键在未点击当前iframe下,并没有生效: 修复:未阻止滚轮事件冒泡: 图片查看是在新打开的html页面查看,在用户未点击情况下 ...
- Jquery 图片走马灯效果原理
本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解 照例先上代码: HTML: <div class="box"> & ...
- jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)
前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...
- jQuery实现图片播放器插件
jquery 图片播放器插件 文章原创,欢迎转载,转载请注明出处:http://blog.csdn.net/xxd851116 作者:笑的自然 我的博客:http://blog.csdn.net/x ...
最新文章
- Android开发--图形图像与动画(二)--Animation实现图像的 渐变 缩放 位移 旋转
- 江苏联合阿里云启动“1+30+300”工程 制造业大省欲打造智造模板
- 监督学习和无监督学习_机器学习的要素是什么? 有监督学习和无监督学习两大类...
- MediaPlayer 的prepareAsync called in state 8 错误
- Atitit. 有限状态机 fsm 状态模式
- 修改mysql字段长度
- linux线程互踩,IOS 多线程漫漫谈(Process and Thread)
- QQ空间自动点赞脚本1
- 计算机编辑文档教程,列举Word文档中常用编辑操作
- bandwidth看内存带宽性能
- CryEngine 渲染流程
- java pdf添加页码_java itext pdf 怎么加页码
- Vue中如何关闭语法检查
- 蚂蚁资深技术专家刘晓莹十年支付宝回忆录
- 多维多重背包问题_多重背包问题
- Servernbsp;Tomcatnbsp;v7.0amp;nbs…
- 4、IOC 之Bean的依赖关系
- 头顶脱发严重怎么办 需要时刻牢记五个建议
- 深入浅出推荐系统(二):召回:内容为王
- NFS网络文件系统共享日志
热门文章
- 版权登记保护的是什么?
- POI + PDFbox将PPT有图表页转换成图片
- 第三波:HTML+CSS+JavaScript数据可视化大屏平台模板实例11大通用模板,面向各行各业。
- python恶搞代码打开对方摄像头_大神们救命啊!!如何实现把摄像头读入的视频在tk界面呈现出来?...
- java中git版本控制,git版本控制管理是什么?git如何实现版本控制?
- 一次电话面试的问题总结
- 几种实现统计表的方法
- 超级喜欢老罗,2016发布了新手机
- Linux----bond技术及mode模式详解
- 小白的高德地图初体验(四)—— 矢量图形