/** 基本思路:两张div重叠显示,一张以透明1显示图片,一张渐变显示图片 第一步focus_show设置为显示第一张图片且透明图为0 第二步缓慢增加至接近1(ie为100) 第三步focus_bg显示第一张图片并停顿一段时间 重复以上步骤 */ (function($){ $.fn.defaultsettings = { focus_id : 1, //待显示图片 focus_time : 0, focus_begin : true, //第一张图片装载后后变为false focus_count : 0, //图片队列的长度 focus_bg : "", // focus_url : "", //图片url focus_title : "", //图片title focus_left_bg : "", focus_left_show : "", focus_right_bg : "", focus_right_show : "", stop_time : 5000, opacity_step : 5, //1<=opacity_step<20 isuselink : true, isusearrow : true, // color0 : "#fff", //小方块非选中状态的颜色 color1 : "#333", width : 1200, //图片原始宽度 height : 400, //图片原始高度 realwidth : 1500, realheight : 500 }; $.fn.run = function(options){ var setting = $.extend({}, $.fn.defaultsettings, options); var focus_interval; //定时器 var $this = $(this); var offset = $('#focus').offset(); init = function(){ //确定长度 if(navigator.appname == "microsoft internet explorer"){ setting.focus_count = document.getelementbyid("focus_img").childnodes.length; }else{ setting.focus_count = document.getelementsbyname("focus_img").length; } //增加链接 if(setting.isuselink){ $('#focus_link').append(""); $('#focus_link').css('width', setting.focus_count*30); for(var i=1; i<=setting.focus_count; i++){ $('#focus_link ul').append("
  • "); } $('#focus_link').css('position', 'absolute'); $('#focus_link ul li').css('margin-left', '10px'); $('#focus_link ul li').css('float', 'left'); $('#focus_link div').bind('click', jumpto); //窗口大小变化时重新定位$('#focus_link') $(window).resize(relocatelink); relocatelink(); } if(setting.isusearrow){ $('.control').bind('mouseenter', control_mouseenter); $('.control').bind('mouseleave', control_mouseleave); $('#to-left').bind('click', control_toleft); $('#to-right').bind('click', control_toright); $('#focus').bind('mouseenter', function(){$('.control').css('display', 'block');}); $('#focus').bind('mouseleave', function(){$('.control').css('display', 'none');}); //窗口大小变化时重新定位$('#focus_link') $(window).resize(relocatearrow); relocatearrow(); } $(window).resize(windowresize); }; func_focus = function(){ if(setting.focus_id > setting.focus_count) setting.focus_id = 1; //取消定时器. if(!setting.focus_begin) { clearinterval(focus_interval); } //启动定时器 focus_interval = setinterval("focus_showimg()", 50); }; update_link = function(index){ if(setting.isuselink){ $('#focus_link div').css('background-color', setting.color0); //如果不设置font-size为0,每次修改背景设置时ie6会将font-size设置为浏览器默认值将div撑开(此处写在了css样式里) //$('#focus_link div').css('font-size', 0); $("#focus_link li[id='li_"+(index==0?setting.focus_count:index)+"'] div").css('background-color', setting.color1); } }; jumpto = function(){ var lid = $(this).parent().attr("id"); var rid = lid.substring(lid.lastindexof('_')+1); setting.focus_id = parseint(rid); setting.focus_time = 0; setting.focus_begin = true; setting.focus_bg = ""; clearinterval(focus_interval); settimeout(func_focus, 50); }; control_mouseenter = function(){ $(this).removeclass('opacity_class0'); $(this).addclass('opacity_class1'); }; control_mouseleave = function(){ $(this).addclass('opacity_class0'); $(this).removeclass('opacity_class1'); }; control_toleft = function(){ var go = setting.focus_id - 3; go = go==0?setting.focus_count:go; go = go<0?setting.focus_count-1:go; $("#focus_link li[id='li_"+go+"'] div").click(); }; control_toright = function(){ var go = setting.focus_id - 1; $("#focus_link li[id='li_"+go+"'] div").click(); }; //使用focus_show名称在ie下报错,难道是因为页面有一个id为focus_show的div吗 focus_showimg = function(){ if(setting.focus_id > setting.focus_count) setting.focus_id = 1; if(setting.focus_time < 100 /setting.opacity_step && setting.focus_bg != "") { var v = setting.opacity_step; if(navigator.appname=="microsoft internet explorer") { document.getelementbyid("focus_show").style.filter = "alpha(opacity=" + (v * setting.focus_time) + ")"; document.getelementbyid("focus_left_show").style.filter = "alpha(opacity=" + (v * setting.focus_time) + ")"; document.getelementbyid("focus_right_show").style.filter = "alpha(opacity=" + (v * setting.focus_time) + ")"; }else{ document.getelementbyid("focus_show").style.opacity = v * setting.focus_time / 100; document.getelementbyid("focus_left_show").style.opacity = v * setting.focus_time / 100; document.getelementbyid("focus_right_show").style.opacity = v * setting.focus_time / 100; } setting.focus_time ++; }else if(setting.focus_count > 0){//图片队列不为空 if(!setting.focus_begin) { document.getelementbyid("focus_bg").innerhtml = ""; $(document.getelementbyid("focus_left_bg")).css('background', "url(" + setting.focus_left_bg + ") repeat-x"); $(document.getelementbyid("focus_right_bg")).css('background', "url(" + setting.focus_right_bg + ") repeat-x"); setting.focus_time = 0; clearinterval(focus_interval); } var val = document.getelementbyid("focus_" + setting.focus_id).innerhtml; var val_left = document.getelementbyid("focus_left_" + setting.focus_id).innerhtml; var val_right = document.getelementbyid("focus_right_" + setting.focus_id).innerhtml; var arr = val.split("|"); if(navigator.appname=="microsoft internet explorer") { document.getelementbyid("focus_show").style.filter = "alpha(opacity=0)"; document.getelementbyid("focus_left_show").style.filter = "alpha(opacity=0)"; document.getelementbyid("focus_right_show").style.filter = "alpha(opacity=0)"; }else{ document.getelementbyid("focus_show").style.opacity = 0; document.getelementbyid("focus_left_show").style.opacity = 0; document.getelementbyid("focus_right_show").style.opacity = 0; } document.getelementbyid("focus_show").innerhtml = ""; $(document.getelementbyid("focus_left_show")).css('background', "url(" + val_left + ") repeat-x"); $(document.getelementbyid("focus_right_show")).css('background', "url(" + val_right + ") repeat-x"); setting.focus_left_show = val_left; setting.focus_right_show = val_right; setting.focus_url = arr[1]; setting.focus_title = arr[2]; if(setting.focus_count > 1) setting.focus_id ++; if(!setting.focus_begin) { focus_interval = setinterval("func_focus()", setting.stop_time); update_link(setting.focus_id-2); }else setting.focus_begin = false; setting.focus_bg = arr[0]; setting.focus_left_bg = val_left; setting.focus_right_bg = val_right; } }; windowresize = function(){ //$('#focus_bg').css('width','100%'); //$('#focus_show').css('width','100%'); $('#focus_bg').css('width',0); $('#focus_show').css('width',0); //图片高度不变 //var availwidth = screen.availwidth; var clientwidth = document.documentelement.clientwidth; var scrollwidth = $('body').get(0).scrollwidth; if(scrollwidth==clientwidth && clientwidth>=setting.width){ //1.屏幕大于图片时不拉伸 setting.realwidth = setting.width; setting.realheight = setting.height; var left_fg_width = (clientwidth-setting.width)/2; //调整中间图片大小和位置 $('#focus_bg').css('left', left_fg_width); $('#focus_show').css('left', left_fg_width); $('#focus_bg').css('width', setting.realwidth); $('#focus_show').css('width', setting.realwidth); //设置两边背景色的宽度、高度和位置 $('#focus_left_bg').css('left', 0); $('#focus_left_bg').css('width', left_fg_width); $('#focus_left_bg').css('height', setting.realheight); $('#focus_left_show').css('left', 0); $('#focus_left_show').css('width', left_fg_width); $('#focus_left_show').css('height', setting.realheight); $('#focus_right_bg').css('left', (clientwidth+setting.width)/2); $('#focus_right_bg').css('width', left_fg_width); $('#focus_right_bg').css('height', setting.realheight); $('#focus_right_show').css('left', (clientwidth+setting.width)/2); $('#focus_right_show').css('width', left_fg_width); $('#focus_right_show').css('height', setting.realheight); //2.屏幕大于图片时拉伸图片 //setting.realwidth = clientwidth; //setting.realheight = clientwidth/setting.width*setting.height; }else if(scrollwidth==clientwidth && clientwidth