有些使用Flash的广告图片变换代码在手机不支持，在网上搜到了一个解决的方法：
Flash嵌入处：
<iframe style="width:474px;height:276px; border:0;" scrolling="no" src="flash.htm" ></iframe>
flash.htm：
<!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> <title></title> <link type="text/css" href="css/kszcy.css" rel="Stylesheet"/> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/jquery.myFocus_kszc.js"></script> <script type="text/javascript"> //------------判断浏览器----------- var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] : (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0; //------------判断浏览器----------- $(function () { try { if (Sys.ie) { $("#flashbody").css("margin-top", "-4").css("margin-left", "-4"); } else { } } catch (e) { } }); </script> </head> <body id="flashbody" style="margin-top:0px; margin-left:0px;"> <div id="formAd"> <ul> <li><a target="_blank" href='#'><img src="flash/1.jpg" alt="" /></a></li> <li><a target="_blank" href='#'><img src="flash/2.jpg" alt="" /></a></li> <li><a target="_blank" href='#'><img src="flash/3.jpg" alt="" /></a></li> <li><a target="_blank" href='#'><img src="flash/4.jpg" alt="" /></a></li> <li><a target="_blank" href="http://www.pp6.cn/Games/GamesDetail.aspx?ID=6"><img src="flash/5.jpg" alt="" /></a></li> <li><a target="_blank" href="http://www.pp6.cn/Games/GamesDetail.aspx?ID=5"><img src="flash/6.jpg" alt="" /></a></li> <li><a target="_blank" href="http://www.pp6.cn/Games/GamesDetail.aspx?ID=4"><img src="flash/7.jpg" alt="" /></a></li> <li><a target="_blank" href="http://www.pp6.cn/Games/GamesDetail.aspx?ID=7"><img src="flash/8.jpg" alt="" /></a></li> </ul> </div> </body> </html>
kszcy.css：
/* 由开发人员工具生成。它可能不是原始源文件的准确表示形式。*/ #formAd UL { MARGIN: 0px; padding:0px; } #formAdLI { MARGIN: 0px; padding:0px; } #formAd A { COLOR: #fff; CURSOR: pointer; TEXT-DECORATION: none } #formAd A:hover { COLOR: #fff9a0 } #formAd IMG { VERTICAL-ALIGN:middle; } #formAd { WIDTH: 474px; HEIGHT: 276px; OVERFLOW: hidden; } #formAd LI { WIDTH: 474px; DISPLAY: inline; FLOAT: left; HEIGHT: 276px; OVERFLOW: hidden } #formAd LI IMG { WIDTH: 474px; HEIGHT: 276px } .focusNum { POSITION: absolute; top:250px; left:370px } .focusNum SPAN { TEXT-ALIGN: center; LINE-HEIGHT: 18px; BACKGROUND-COLOR: #b7d8ff; MARGIN: 0px 3px; WIDTH: 18px; DISPLAY: inline-block; HEIGHT: 18px; CURSOR: pointer } .focusNum SPAN.curr { BACKGROUND-COLOR: #3086eb; COLOR: #ffffff } .focusTit { DISPLAY: none }
jquery.myFocus_kszc.js：
(function($) { $.fn.myFocus = function(options) { //默认配置 var defaults = { width:474, height:276, animation:"defaults", times:5000 }; // 覆盖默认配置 var opts = $.extend(defaults, options); var setId=[]; //开始 this.each(function(i){ var $this=$(this) ,$list=$this.find("ul > li") ,$ul=$this.find("ul") ,imgnum=$list.size() ,firstTxt=$list.eq(0).find("a").attr("title") ,tab; //显示tab和title tab="<div class='focusNum'>"; for(var i=0;i<imgnum;i++){ if(i==0){ tab+="<span href='#' class='curr'>"+(i+1)+"</span>"; }else{ tab+="<span href='#'>"+(i+1)+"</span>"; } } tab+="</div>"; $this .append(tab) .append($("<p class='focusTit'>"+firstTxt+"</p>")) //设置宽度和高度 .css({width:opts.width,height:opts.height}) .find("ul") .css({width:opts.width*imgnum,height:opts.height}) .find("li") .css({width:opts.width,height:opts.height}); $list.each(function(index){ $(this).data("index",index); }); $this.data("currFocus",0); //声明动画函数 function move(){ setId[i]=setInterval(function(){ $.fn.myFocus.animation[opts.animation]($this,opts); },opts.times); } //开始动画 move(); var $tab=$this.find("div > span") ,$title=$this.find("p"); //鼠标经过tab $tab.hover(function(){ clearInterval(setId[i]); var index=$tab.index($(this)); $this.data("currFocus",index); $ul.stop(true,true).animate({ "margin-left":-opts.width*index },500); $tab.removeClass("curr"); $(this).addClass("curr"); var currList=$list.eq(index); $title.text(currList.find("a").attr("title")); },function(){ move(); }); //鼠标经过图片 $ul.hover(function(){ clearInterval(setId[i]); },function(){ move(); }); }); }; //动画函数------- $.fn.myFocus.animation={ defaults:function($this,opts){ var $ul=$this.find("ul") ,_this=this ,$list=$this.find("ul>li") ,$tab=$this.find("div > span") ,$title=$this.find("p") ,imgNum=$list.size() ,curtab=$this.data("currFocus"); if(curtab<imgNum-1){ $this.data("currFocus",curtab+1); $ul.animate({ "margin-left": '-='+opts.width },500); }else{ curtab=-1; $ul.animate({ "margin-left": '0px' },500,function(){ $this.data("currFocus",0); }); } //更改标题和tab var currList=$list.eq(curtab+1); $title.text(currList.find("a").attr("title")); index=currList.data("index"); //图片过渡效果 // currList.animate({ // opacity: 0.25 // },500, function() { // $(this).fadeTo('slow',1); // }); $tab.removeClass("curr") .eq(index) .addClass("curr"); } }; })(jQuery); $(function(){ $("#formAd").myFocus({ width: 474, height: 276, times: 3000 }); });
vinson
