Jquery Slider 插件 lyhucSlider

　　前自己两天写了一个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/

转载于:https://www.cnblogs.com/hubj/archive/2011/03/24/1993628.html