演示文档
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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/show_img.js"></script>
<style>
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
}
.img_wrapper{
width:950px;
height:470px;
overflow:hidden;
position:relative;
}
.img_sub_wrapper{
position:absolute;
}
.img_sub_wrapper img{
position:absolute;
display:none;
}
.num_list {
margin-left:865px;
margin-top:440px;
position: absolute;
}
.num_list li{
float:left;
width:15px;
height:20px;
text-align:center;
background:#fefefe;
margin: 0 0 0 3px;
cursor:pointer;
}
.num_list li.hover{
background:#000;
color:#fff;
}
#control{
float:left;
margin:120px 0 0 20px;
}
#img_wrapper{
float:left;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var show_img = $('#img_wrapper').show_img();
$('#play_btn').click(function(){
show_img.play();
});
$('#pause_btn').click(function(){
show_img.pause();
});
$('#next_btn').click(function(){
show_img.next_img();
});
$('#back_btn').click(function(){
show_img.back_img();
});
$('#show_num_text_btn').click(function(){
show_img.show_number_text();
});
$('#hide_num_text_btn').click(function(){
show_img.hide_number_text();
});
$('#show_num_list_btn').click(function(){
show_img.show_number_list();
});
$('#hide_num_list_btn').click(function(){
show_img.hide_number_list();
});
$('#fade_btn').click(function(){
show_img.set_fade();
});
$('#slide_btn').click(function(){
show_img.set_slide();
});
});
</script>
</head>
<body>
<div id="img_wrapper" class="img_wrapper">
<div id="img_sub_wrapper" class="img_sub_wrapper">
<img src="imgs/01.jpg" style="display:block"/>
<img src="imgs/02.jpg" />
<img src="imgs/04.jpg" />
<img src="imgs/05.jpg" />
</div>
<ul id="num_list" class="num_list"></ul>
</div>
<div id="control">
<input type="button" value="play" id="play_btn" /> <br />
<input type="button" value="pause" id="pause_btn" /> <br />
<input type="button" value="back" id="back_btn" /> <br />
<input type="button" value="next" id="next_btn" /> <br />
<input type="button" value="hide number text" id="hide_num_text_btn" /> <br />
<input type="button" value="show number text" id="show_num_text_btn" /> <br />
<input type="button" value="hide number list" id="hide_num_list_btn" /> <br />
<input type="button" value="show number list" id="show_num_list_btn" /> <br />
<input type="button" value="fade" id="fade_btn" /> <br />
<input type="button" value="slide" id="slide_btn" /> <br />
</div>
</body>
</html>
js 文件:
(function($){
var timer = 0;
var show_img = function(options){
init.call(this,options);
return $.fn.show_img;
};
function init(options){
//alert($(this).find('.img_sub_wrapper').children('img').length);
$.extend({},show_img.defaults,options);
do_next();
show_img.img_list = $(this).find('.img_sub_wrapper').children('img');
show_img.num_list = $(this).find('.num_list');
show_img.defaults.img_length = show_img.img_list.length;
create_number_list();
$($(show_img.num_list).find('li')[show_img.defaults.current_img]).
addClass('hover');
}
function do_next(){
clearTimeout(timer);
if(show_img.defaults.play==1){
timer = setTimeout(function(){
show_img.next_img();
},show_img.defaults.pause_speed+show_img.defaults.speed);
}
}
function create_number_list(){
var html = '';
for(var i=1;i<=show_img.defaults.img_length;i++){
html = '<li class="number_list"><span class="number_text">';
html += i;
html += '</span></li>';
var li = $(html).click((function(n){
return function(){
show_img.show_special_img(n-1);
};
})(i));
$(show_img.num_list).append(li);
}
}
function do_fade(now_index,next_index){
$(show_img.img_list[now_index]).
fadeOut(show_img.defaults.speed);
//alert(show_img.defaults.current_img);
$(show_img.img_list[next_index]).
fadeIn(show_img.defaults.speed);
}
function do_slide(now_index,next_index){
$(show_img.img_list[now_index]).
slideUp(show_img.defaults.speed);
//alert(show_img.defaults.current_img);
$(show_img.img_list[next_index]).
slideDown(show_img.defaults.speed);
}
function do_effect(now_index,next_index){
switch(show_img.defaults.mode){
case 1:
do_fade(now_index,next_index);
case 2:
do_slide(now_index,next_index);
}
$($(show_img.num_list).find('li')[now_index ]).
removeClass('hover');
$($(show_img.num_list).find('li')[next_index]).
addClass('hover');
}
show_img.next_img = function(){
show_img.show_special_img(show_img.defaults.current_img+1);
}
show_img.back_img = function(){
show_img.show_special_img(show_img.defaults.current_img-1);
}
show_img.show_special_img = function(i){
do_next();
var now_index = show_img.defaults.current_img;
var next_index = i;
if(next_index<0){
next_index = show_img.defaults.img_length-1;
}
if(next_index == show_img.defaults.img_length){
next_index = 0;
}
show_img.defaults.current_img = next_index;
do_effect(now_index,next_index);
}
show_img.play = function(){
clearTimeout(timer);
show_img.defaults.play = 1;
do_next();
}
show_img.pause = function(){
clearTimeout(timer);
show_img.defaults.play = 0;
}
show_img.show_number_list = function(){
show_img.defaults.number_list = 1;
$(show_img.num_list).css('display','block');
}
show_img.hide_number_list = function(){
show_img.defaults.number_list = 0;
$(show_img.num_list).css('display','none');
}
show_img.show_number_text = function(){
show_img.defaults.number_text = 1;
$(show_img.num_list).find('span.number_text').css('display','block');
}
show_img.hide_number_text = function(){
show_img.defaults.number_text = 0;
$(show_img.num_list).find('span.number_text').css('display','none');
}
show_img.set_fade = function(){
show_img.defaults.mode = 1;
}
show_img.set_slide = function(){
show_img.defaults.mode = 2;
}
// initial value
show_img.defaults = {
"pause_speed" : 2000,//停顿速度
"speed" : 2000, //缓动速度
"play" : 1,//自动播放
"bg_light" : 0,//背光,0:禁用,1:黑色,2:白色
"mode" : 1,//过渡缓动, 1:fade,2:slide
"thumb" : 0,//是否显示缩略图 ,功能尚未添加
"number_text" : 0,//是否显示列表中的数字
"number_list" : 0,//是否显示列表
"current_img" : 0,//当前图片
// "next_img" : 1,//下一张耀显示的图片
"img_length" : 0//图片总数
};
$.fn.show_img = show_img;
})(jQuery);
打包下载: