您的位置：首页 > Web前端 > JQuery

类似QQ管家页面jquery图片轮换实例

2012-07-01 13:12 274 查看

前天在开源中国社区看到一片帖子，是使用jQuery实现跟我标题一样的效果的帖子。看了以后觉得有需要改进的地方，然后昨晚自己就捣鼓了一下，重新实现了一下标题所述的效果。废话不多说，请看代码

View Code

<html>

<style type="text/css">
.imgbox{
border:1px solid #c9c9c9;
width:480px;
height:480px;
position:absolute;
left:320px;
}
img{
border:none;
width:480px;
height:480px;
cursor:pointer;
star:expression(onmouseover=function(){this.style.border = '3px solid #0099ff'},
onmouseout=function(){this.style.border = '1px solid #c9c9c9'})

}

</style>
<body>
<div id="imgBoxFirst" class="imgbox">
<img src="http://hiphotos.baidu.com/wytfzl/pic/item/67b5c80205a3c0d608fa93a9.jpg"/>
</div>
<div id="imgBoxSecond" class="imgbox">
<img src="http://hiphotos.baidu.com/735216726/pic/item/bf5edbf76078035eb07ec5be.jpg" />
</div>
<div id="imgBoxEnd" class="imgbox">
<img src="http://hiphotos.baidu.com/wzs_ja/pic/item/70977a94cd2eac5bd31b70bf.jpg"  />
</div>
<div id="7" class="imgbox">
<img src="http://hiphotos.baidu.com/cheninye/pic/item/dded5a4241606f539213c6c8.jpg"  />
</div>
<div id="33" class="imgbox">
<img src="http://hiphotos.baidu.com/992787588/pic/item/649b6c32886b30935fdf0e6d.jpg"  />
</div>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
(function($){
var currIndex = 1;
var p_Index = {};
var p_enum = [];
var Init = function(){
$(".imgbox").each(function(){
p_Index = {'boxId':$(this).attr('id'),'boxIndex':currIndex};
p_enum.push(p_Index);
$(this).css('z-index',currIndex++).bind('click',function(){
changePosition($(this));
});
});
};

var changePosition = function(obj)
{
var param = SwapZIndex();
var lf = obj.css('left');
var llf = $('#'+p_enum[param.flagMin].boxId).css('left');
obj.animate({'left':'640px'},800,function(){
obj.css('z-index',p_enum[param.flagMin].boxIndex).animate({'left':lf},800,null);
for(var n=0; n< p_enum.length; n++)
{
if(n == param.flagSec || n == param.flagMax) continue;
$('#'+p_enum
.boxId).css('z-index',parseInt(p_enum
.boxIndex)+1);
p_enum
.boxIndex = parseInt(p_enum
.boxIndex)+1;
}
});
p_enum[param.flagMax].boxIndex = p_enum[param.flagMin].boxIndex;

$('#'+p_enum[param.flagSec].boxId).animate({'left':'80px'},800,function(){
$('#'+p_enum[param.flagSec].boxId).css('z-index',parseInt(p_enum[param.flagSec].boxIndex) + 1).animate({'left':llf},800,null);
});
p_enum[param.flagSec].boxIndex = parseInt(p_enum[param.flagSec].boxIndex) + 1;
}

var SwapZIndex = function(){
var minIndex = p_enum[0].boxIndex, maxIndex = p_enum[0].boxIndex;
var flagmax = 0,flagmin = 0;
for(var n=0; n< p_enum.length; n++)
{
if(minIndex > p_enum
.boxIndex)
{
minIndex = p_enum
.boxIndex;
flagmin = n;
}

if(maxIndex < p_enum
.boxIndex)
{
maxIndex = p_enum
.boxIndex;
flagmax = n;
}
}
var secIndex = p_enum[flagmin].boxIndex , flagsec = 0;
for(var n=0; n< p_enum.length; n++)
{
if(n != flagmax)
if(secIndex < p_enum
.boxIndex)
{
secIndex = p_enum
.boxIndex;
flagsec = n;
}
}

return {'flagMax':flagmax,'flagMin':flagmin,'flagSec':flagsec};
}

window['mySpace'] = {};
window['mySpace']['Init'] = Init;
})(jQuery);

mySpace.Init();
</script>

欢迎拍砖.....

实例下载猛击这里

源灵感地址：http://www.oschina.net/code/snippet_268286_11424

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航