jquery轮播小插件-集成css
日期：2014-05-17 浏览次数：20675 次
jquery轮播小插件--集成css
先上html代码，简单，干净~
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery轮播小插件</title>
<style type="text/css">
*{margin:0; padding:0; list-style:none;}
.advPlay_node{width:475px; height:255px; padding:5px; border:1px solid #333; overflow:hidden;}
</style>
</head>
<body>
<div class="advPlay_node fl">
<div id="advPlay">
<ul>
<li><a href="http://www.baidu.com"><img src="../images/adv_1.jpg" alt="test_01" title="test_01" /></a></li>
<li><a href="http://www.souhu.com"><img src="../images/adv_1.jpg" alt="test_02" title="test_02" /></a></li>
<li><a href="http://www.sina.com.cn"><img src="../images/adv_1.jpg" alt="test_03" title="test_03" /></a></li>
<li><a href="http://www.qq.com"><img src="../images/adv_1.jpg" alt="test_04" title="test_04" /></a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="../do/jquery.js"></script>
<script type="text/javascript" src="JQ.js"></script>
<script type="text/javascript">
$().ready(function(){
$('#advPlay').mPicFlash({'state':'left','speed':1000,'title':true});
})
</script>
</body>
</html>
?
?
传说中，神秘的JQ.js文件
?
// JavaScript Document
$.fn.extend({
mPicFlash:function(obj){
var _method=this,
flash={
index:0,
state:obj&&obj.state&&obj.state=='top'?'top':'left',
speed:obj&&obj.speed&&typeof obj.speed==='number'?obj.speed:3000,
title:obj&&obj.title&&obj.title===true?true:false,
init:function(){
this.width=_method.parent().width();
this.height=_method.parent().height();
this.length=_method.find('ul li').length;
this.change={
float:this.state=='left'?'left':'none',
ulCss:this.state=='left'?{'width':this.width*this.length,'position':'absolute','z-index':'10'}:{'height':this.height*this.length,'position':'absolute','z-index':'10'}
};
_method.css({'width':this.width,'height':this.height,'float':'left','overflow':'hidden','position':'relative'}).find('ul,li,img').css({'width':this.width,'height':this.height,'border':'none','float':this.change.float,'overflow':'hidden'});
_method.find('ul').css(this.change.ulCss);
var html=this.title?'<p style="width:100%; height:28px; background:#000; font-size:14px; line-height:28px; overflow:hidden; padding-left:10px; position:absolute; bottom:0; left:0; z-index:11; filter:alpha(opacity=60); opacity:0.6;"></p>':'';
html+='<ol style="height:18px; color:#fff; position:absolute; bottom:5px; right:0; z-index:12; filter:alpha(opacity=60); opacity:0.6;">';
for(var i=1;i<=this.length;i++){
html+='<li style="width:16px; height:16px; background:#000; cursor:pointer; float:left; line-height:15px; margin:1px 5px 1px 5px; text-align:center;">'+i+'</li>'
};
_method.append(html+'</ol>');
this.picChange();
},
GO:function(){
this.init();
this.bindFn();
},
picChange:function(){
_method.find('ol li').eq(this.index).css({'background':'#f00','border':'1px solid #fff','margin':'0 4px 0 4px'}).siblings().css({'background':'#000','border':'0','margin':'1px 5px 1px 5px'});
_method.find('ul').stop(true,false).animate(this.state=='left'?{left:-1*this.width*this.index}:{top:-1*this.height*this.index},600);
_method.find('p').stop(true,false).fadeTo(300,0,function(){
_method.find('p').fadeTo(300,0.6);
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
