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

jQuery效果之轮换板及jQuery插件开发

2015-10-29 11:21 543 查看

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>





</div>



<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)

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

标签：

相关文章推荐

新的分享

章节导航