[转载]Jquery 图片轮播实现原理总结 - 冲杀 - 博客园

[转载]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" alt="" /></a></li>
	<li title="美女海边性感透视装诱惑"><a href="#">
<img src="http://tu.dushiys.com/uploads/allimg/130621/1-130621145931-50.jpg" alt="" /></a></li>
	<li title="夏小薇:百变小魔女变身性感数码宝贝"><a href="#">
<img src="http://p.dddddd.net/uploads/allimg/130620/19-130620115013.jpg" alt="" /></a></li>
	<li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#">
<img src="http://imgtu.5239.com/uploads/allimg/130315/5-130315135240.jpg" alt="" /></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 &gt;= 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

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏