Jquery 图片轮播实现原理总结

以前要做图片轮播效果的时候,总是在网上找一段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主要是为了实现标题的背景色透明,因为直接在标题上设置背景色透明,会造成文字也是有透明度的。

附上demo地址:轮播演示原理demo

 
 
分类: HTML+CSSJavaScript

Jquery 图片轮播实现原理总结的更多相关文章

  1. jQuery 图片轮播的代码分离

    以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号. html代码,以及对应的css代码: <div id=&q ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  4. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  5. IOS 图片轮播实现原理 (三图)

    IOS 图片轮播实现原理的一种 图片轮播所要实现的是在一个显示区域内通过滑动来展示不同的图片. 当图片较少时我们可以采用在滚动视图上添加很多张图片来实现. 但是如果图片数量较多时,一次性加载过多图片会 ...

  6. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  7. jquery 图片轮播demo实现

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...

  8. jquery图片轮播效果(unslider)

    今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...

  9. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

随机推荐

  1. 【Leetcode】Remove Duplicates from Sorted List in JAVA

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  2. HDU 1385 Minimum Transport Cost 最短路径题解

    本题就是使用Floyd算法求全部路径的最短路径,并且须要保存路径,并且更进一步须要依照字典顺序输出结果. 还是有一定难度的. Floyd有一种非常巧妙的记录数据的方法,大多都是使用这种方法记录数据的. ...

  3. WSockExpert[抓包工具]

    一.WSockExpert简单介绍          WSockExpert是一个抓包工具,它能够用来监视和截获指定进程网络数据的传输,对測试站点时非常实用.在黑客的手中,它经常被用来改动网络发送和接 ...

  4. 谈论quick-cocos2d-x和cocos2d-x lua了解差异

    之前说,我把这个两个词区别.经过太长时间.当然,反击的麻烦.quick-cocos2d-x它提到quick,cocos2d-x lua姑且称为本地lua对. 我认为,首先与这两个小的朋友接触会跟着或多 ...

  5. linux下mysql的远程连接

    在服务器上安装mysql后,想使用本地的mysql客户端连接数据库时,提示不允许连接,比较郁闷,找到了这篇文章解决了我的问题: 内容如下: 本地计算机ip:192.168.1.100远程计算机ip:1 ...

  6. java设计模式之七装饰器模式(Decorator)

    顾名思义,装饰模式就是给一个对象增加一些新的功能,而且是动态的,要求装饰对象和被装饰对象实现同一个接口,装饰对象持有被装饰对象的实例,关系图如下: Source类是被装饰类,Decorator类是一个 ...

  7. Spring 之 第一个hellword

    Rod Johnson在2002年编著的<Expert one to one J2EE design and development>一 书中,对Java EE正统框架臃肿.低效.脱离现实 ...

  8. JS中实现A*算法寻路

    <html><head><title>use A* to find path...</title></head><body style ...

  9. 使用gson和httpclient呼叫微信公众平台API

    吐槽:微信api很无语.有一部分xml.有一部分json. 最近看如何调用微信公众平台json有关api更方便.终于找到了httpcliect和gson对. 假设你有一个更好的办法,请告诉我. 了解如 ...

  10. PHP通过OpenSSL生成证书、密钥并且加密解密数据,以及公钥,私钥和数字签名的理解

    一.公钥加密假设一下,我找了两个数字,一个是1,一个是2.我喜欢2这个数字,就保留起来,不告诉你们(私钥),然后我告诉大家,1是我的公钥. 我有一个文件,不能让别人看,我就用1加密了.别人找到了这个文 ...