jQuery效果之轮换板及jQuery插件开发
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/slide.css">
<title>slide test</title>
</head>
<body>
<div id="top-slide" class="slide">
<ul class="slide-ul">
<li class="slide-list">
<div>
<dl>
<dt>
<a href=""><img src="./images/slide_b_1.jpg" alt=""></a>
</dt>
<dd>
<a href=""><img src="./images/slide_b_1_1.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_2.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_3.jpg" alt=""></a>
</dd>
</dl>
</div>
</li>
<li class="slide-list fn-hide">
<div>
<dl>
<dt>
<a href=""><img src="./images/slide_b_2.jpg" alt=""></a>
</dt>
<dd>
<a href=""><img src="./images/slide_b_2_1.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_2.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_3.jpg" alt=""></a>
</dd>
</dl>
</div>
</li>
<li class="slide-list fn-hide">
<div>
<dl>
<dt>
<a href=""><img src="./images/slide_b_3.jpg" alt=""></a>
</dt>
<dd>
<a href=""><img src="./images/slide_b_1_1.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_2.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_3.jpg" alt=""></a>
</dd>
</dl>
</div>
</li>
<li class="slide-list fn-hide">
<div>
<dl>
<dt>
<a href=""><img src="./images/slide_b_4.jpg" alt=""></a>
</dt>
<dd>
<a href=""><img src="./images/slide_b_1_1.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_2.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_3.jpg" alt=""></a>
</dd>
</dl>
</div>
</li>
</ul>
<!--自己在js中添加，保证在HTML中只有内容-->
<!--<div class="slide-nav">
<ul>
<li><a href="">1</a></li>
<li class="slide-nav-curr"><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>-->
</div>
<!--/top-slide-->
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/HDslide.js"></script>
<script type="text/javascript">
$('#top-slide').HDslide({
'auto':true,
'autoTime':3000,
'time':200});
</script>
</body>
</html>
css
#top-slide{
width: 670px;
height: 420px;
margin:0 auto;
}
#top-slide .slide-list{
height: 390px;
}
#top-slide .slide-list dt a{
display: block;
height: 240px;
}
#top-slide .slide-list dd{
height:150px;
}
.slide-list dd a{
float: left;
margin-left: 1px;
}
.slide{
position: relative;
z-index: 100;
}
.slide-nav{
height: 30px;
background-color: #EEE;
clear: both;
position: absolute;
width: 100%;
bottom: 0px;
z-index: 90;
}
.slide-nav ul{
float: right;
margin-top: 5px;
}
.slide-nav li{
float: left;
}
.slide-nav li a{
display: block;
width: 22px;
height: 22px;
background-color: #999;
color: #FFF;
text-align: center;
line-height: 22px;
margin: 0px 5px;
border-radius: 12px;
}
.slide-nav li a:hover{
background-color: #c00;
text-decoration: none;
color: #FFF;
}
.slide-nav .slide-nav-curr a{
background-color: #c00;
text-decoration: none;
color: #FFF;
}
javascript
HDslide.js
(function($){
$.fn.HDslide=function(settings){
settings=jQuery.extend({
"auto":true,//是否自动播放
"autoTime":2500,
"time":200,
"autoNav":true,//自动添加nav
"begin":1//从第几个开始
},settings)//冲掉默认值
$.fn.HDslide.show($(this),settings);
};
$.fn.HDslide.show=function($this,settings){
if(settings.autoNav){
/*在真正实现之前添加nav，以保证在HTML中不同写这个*/
var len = $this.children('ul').find('li').length;
var strNav = '<div class="slide-nav"><ul>';
for(var i = 1;i<=len;i++){
strNav = strNav+'<li><a href="">'+i+'</a></li>';
}
strNav = strNav+'</ul></div>';
$(strNav).appendTo($this);
$this.children('div.slide-nav').find('li').eq(settings.begin-1).addClass('slide-nav-curr');
}
var _slide_nav=$this.children('.slide-nav'),
t='';
t_i='';
if(settings.auto){
$.fn.HDslide.autoSlide(_slide_nav,$this,settings);
}
$('li',_slide_nav).hover(function(){
var _this=$(this);
if(settings.auto){
clearTimeout(t_i);
}
if(_this.is('.slide-nav-curr')==false){
t=setTimeout(function(){
$('.slide-list',$this).hide();
$('.slide-list',$this).eq(_this.index()).animate({"opacity":"show"});
$('li',_slide_nav).removeClass('slide-nav-curr');
_this.addClass('slide-nav-curr');
},settings.time);
}
},function(){
t==''?null:clearTimeout(t);
if(settings.auto){
$.fn.HDslide.autoSlide(_slide_nav,$this,settings);
}
});
}
$.fn.HDslide.autoSlide=function(_slide_nav,$this,settings){
var _slide_nums=_slide_nav.find('li').length,
i=_slide_nav.find('.slide-nav-curr').index();
t_i=setInterval(function(){
i+=1;
if(i==_slide_nums){
i=0;
}
$('.slide-list',$this).hide();
$('.slide-list',$this).eq(i).animate({"opacity":"show"});
$('li',_slide_nav).removeClass('slide-nav-curr');
_slide_nav.find('li:eq('+i+')').addClass('slide-nav-curr');
},settings.autoTime);
// alert(_slide_nums);
}
})(jQuery)