jquery 展示图片/焦点图 插件 show_img-1.1
演示文档
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" style="display:block"/><img src="imgs/02.jpg" /><img src="imgs/04.jpg" /><img src="imgs/05.jpg" /></div><ul id="num_list" 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 : 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);打包下载: