您的位置：首页 > Web前端 > JQuery
Jquery Slider 插件 lyhucSlider

2011-03-24 12:06 253 查看
　　前自己两天写了一个Jquery Slider插件，效果图如下：

　　
　　支持IE 6.0以上

　　

　　
silderShowAdContentTitle_bg.gif

　　
silderShowAdContentTitle_overbg.png
<!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>lyhucSlider </title>
<style type="text/css">
#silderShowAd {
width: 640px;
height: 170px;
position: relative;
overflow: hidden;
background-color:#f2f2f2;
border:1px solid #dddfc9;
}

#silderShowAdContent {
width: 640px;
height:170px;
position: relative;
}

#silderShowAdContentTitle{ float:left; width:156px; z-index:99; position:absolute; left:0}
#silderShowAdContentArea{
position:relative;
left:156px;
overflow:hidden;_zoom:1;_float:left;
z-index:0;
}

#silderShowAdContentTitle a.title{ display:block; height:58px; width:156px; background-image:url(silderShowAdContentTitle_bg.gif); background-repeat:no-repeat; cursor:pointer; }
#silderShowAdContentTitle a.title:hover,#silderShowAdContentTitle a.current{ display:block; height:58px; width:165px; background-image:url(silderShowAdContentTitle_overbg.png); background-repeat:no-repeat;cursor:pointer;  }
#silderShowAdContentTitle h6{ margin:0px;  font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#999; font-weight:normal; padding:8px 8px 0px 8px;}
#silderShowAdContentTitle span{ margin-left:8px; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#999; font-weight:bold; display:block; height:20px;  }
#silderShowAdContentTitle a.title:hover h6,#silderShowAdContentTitle a.title:hover span,#silderShowAdContentTitle a.current h6,#silderShowAdContentTitle a.current span{ color:white;}
#silderShowAdContentAreaALink{
top:0;
width:320px;
height:170px;
display:block;
float:left;
}

#silderShowAdContentAreaDescription {
font: 12px/15px Arial, Helvetica, sans-serif;
padding: 10px 5px;
color:#6e6b64;
display: block;
height: 170px;
overflow:hidden;_zoom:1;_float:left;
width:150px;

}

</style>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
<!--
(function($){
$.fn.lyhucSlider = function(vars) {
var element     = this;
var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 400;
var timeOutFn   = null;
var faderStat   = true;
var mOver       = false;
var current        = null;
var items       = vars.dataJson;
var currNo  = 0;

var itemsUrl   = new Array();
var itemsTitle = new Array();
var itemsTitleA    = new Array();
var itemsImage = new Array();
var itemsDescription = new Array();

var itemsTitleDiv="";
//初始化数组
$.each(items,function(i,item) {
itemsTitle[i]=item.title;
itemsImage[i]=item.img;
itemsDescription[i]=item.description;
itemsUrl[i]=item.url;

itemsTitleDiv+=$(itemsTitle)[i];
});

$("#"+element[0].id+"ContentTitle").html(itemsTitleDiv);

//初始化左边链接事件
var i=0;
$("#"+element[0].id+"ContentTitle > a").each(function()
{
$(this).hover(function(){skipSlider($(this).index())},function(){mOver=false;});
itemsTitleA[i]=$(this);
i++;
});

//重复调用makeSlider
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 100 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("...");
}
}

//直接跳到当前广告项
var skipSlider =function(index)
{
currNo=index;
$(itemsTitleA).each(function(i)
{
$(itemsTitleA[i]).attr("class","title");
});

$("#"+element[0].id+"ContentAreaImg").attr("src",itemsImage[currNo]);
$("#"+element[0].id+"ContentAreaDescription").html(itemsDescription[currNo]+" <a href='"+itemsUrl[currNo]+"' class='readmore'>read more</a>");
$(itemsTitleA[currNo]).attr("class","current");
$("#"+element[0].id+"ContentArea").fadeIn("fast");
mOver=true;
}

var makeSlider = function() {
currNo = (currNo == itemsTitleA.length) ? 0 : currNo;
if(!mOver) {
if(faderStat == true) {
$("#"+element[0].id+"ContentAreaImg").attr("src",itemsImage[currNo]);
$("#"+element[0].id+"ContentAreaDescription").html(itemsDescription[currNo]+" <a href='"+itemsUrl[currNo]+"' class='readmore'>read more</a>");
$(itemsTitleA[currNo]).attr("class","current");
$("#"+element[0].id+"ContentArea").fadeIn("slow", function() {
faderStat = false;
fadeElement(false);

});
}else
{
$(itemsTitleA[currNo]).attr("class","title");
$("#"+element[0].id+"ContentArea").fadeOut("fast", function() {
faderStat = true;
++currNo;
fadeElement(false);

});

}
}
}

makeSlider();
};
})(jQuery);

$(document).ready(function() {
$('#silderShowAd').lyhucSlider({
timeOut: 2000,dataJson:[{title:"<a class='current'><h6>AAAA</h6><span>Daily until Mar 14 | Posted by xxx</span></a>",
img:"1.jpg",
description:"Hi Ni Hao ..."
,url:""},{title:"<a class='title'><h6>BBB</h6><span>Daily until Mar 14 | Posted by xxx</span></a>",
img:"2.jpg",
description:"Every Sunday at 10:00- 11:30 and 14:00- 15:30 Donation: Pay what you can, suggested donation 60 RMB Please bring your own mat if you can. I have three extra mats people can use. There will be two se..."
,url:""},{title:"<a class='title'><h6>CCC</h6><span>Daily until Mar 14 | Posted by xxx</span></a>",
img:"3.jpg",
description:"Now is a great time to start to get into shape for summer – it is coming, really it is! In addition to the already successful Dolls Boot Camps, we are offering a Saturday morning training session by..."
,url:""}]
});
});
-->
</script>
</head>
<body>
<div  id="silderShowAd">
<div id="silderShowAdContent">
<div  id="silderShowAdContentTitle"></div>
<div id="silderShowAdContentArea">
<a id="silderShowAdContentAreaALink"><img  id="silderShowAdContentAreaImg" /></a>
<span id="silderShowAdContentAreaDescription"></span>
</div>
</div>
</div>
</body>
</html>
在线演示地址：http://www.chuangyiwu.com/demo/jquery/lyhucslider/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航