码迷,mamicode.com
首页 > 其他好文 > 详细

图片来回切换的新闻展示效果

时间:2018-06-05 14:07:45      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:mbed   down   lin   中国足球   世界   自己   ESS   相关   切换   

  和大家分享一个从新浪网里抠出来的图片切换展示的特效。从新浪网里抠出来的一个图片切换轮播展示效果,使用起来非常简单的。

技术分享图片

第一步:把flash框架下载保存到自己的网站里:

http://www.aijquery.cn/html/aijquery/inc/flashimg.swf


第二步:定义要展示的图片,及相关的标题、简介等信息:

//定义大图的路径,
var bigPic0 ="1.jpg";
var bigPic1 ="2.jpg";
var bigPic2 =3.jpg";
var bigPic3 ="4.jpg";
//小图路径
var smallPic0 ="s1.jpg";
var smallPic1 ="s2.jpg";
var smallPic2 ="s3.jpg";
var smallPic3 ="s4.jpg";
//大图的点击后的URL
var PicURL0 ="http://www.aijquery.cn";
var PicURL1 ="http://www.aijquery.cn";
var PicURL2 ="http://www.aijquery.cn";
var PicURL3 ="http://www.aijquery.cn";
//标题
var t0="1111";
var t1="2222";
var t2="3333";
var t3="4444";
//描述
var describe0="11111111111……";
var describe1="22222222222222222222……";
var describe2="33333333333333333333333。";
var describe3="4444444444444444444";
//
var t=t0+"[|]"+t1+"[|]"+t2+"[|]"+t3;
var bigPicURL=bigPic0+"[|]"+bigPic1+"[|]"+bigPic2+"[|]"+bigPic3;
var smallPicURL=smallPic0+"[|]"+smallPic1+"[|]"+smallPic2+"[|]"+smallPic3;
var PicURL=PicURL0+"[|]"+PicURL1+"[|]"+PicURL2+"[|]"+PicURL3;
var describe = describe0+"[|]"+describe1+"[|]"+describe2+"[|]"+describe3;

第三步:在要展示的地方直接引入下面代码:

document.write("<object classid=‘clsid:d27cdb6e-ae6d-11cf-96b8-444553540000‘ codebase=‘http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0‘ 
width=‘535‘ height=‘356‘ ID=FSCommand NAME=‘focus_one‘ align=‘middle‘><param name=‘allowScriptAccess‘ value=‘sameDomain‘ /><param name=‘movie‘ value=‘/html/aijquery/inc/flashimg.swf‘ /><param name=‘FlashVars‘ value=‘bigPicURL=" + bigPicURL + "&smallPicURL=" + smallPicURL + "&t="+t+"&PicURL="+PicURL+"&describe="+describe+"‘/><param name=‘quality‘ value=‘high‘ /><param name=‘bgcolor‘ value=‘#ffffff‘ /><embed src=‘/html/aijquery/inc/flashimg.swf‘
FlashVars=‘bigPicURL=" + bigPicURL + "&smallPicURL=" + smallPicURL + "&t="+t+"&PicURL="+PicURL+"&describe="+describe+"‘
quality=‘high‘ bgcolor=‘#ffffff‘ width=‘535‘ height=‘356‘ name=‘focus‘ swLiveConnect=‘true‘ align=‘middle‘ allowScriptAccess=‘sameDomain‘
type=‘application/x-shockwave-flash‘ pluginspage=‘http://www.macromedia.com/go/getflashplayer‘ /></object>");

  PS:引入的时候记得把上面第三步里的swf文件的地址换成自己的!!!

一个例子:

技术分享图片
<!doctype html>
<html lang="en">
<head>
<title>新浪里抠出来的图片新闻展示—在线演示-aijQuery.cn</title>
<script language="JavaScript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body class="text-center pt-3">
<script language=javascript>
//定义大图的路径,
var bigPic0 ="http://image2.sina.com.cn/book/U1503P167T135D1F4549DT20060629223845.jpg";
var bigPic1 ="http://image2.sina.com.cn/book/U1503P167T135D1F4552DT20060629223845.jpg";
var bigPic2 ="http://image2.sina.com.cn/book/U1396P167T135D1F4555DT20060629141338.jpg";
var bigPic3 ="http://image2.sina.com.cn/book/U1396P167T135D1F4558DT20060628170108.jpg";
//小图路径
var smallPic0 ="http://image2.sina.com.cn/book/U1503P167T135D1F4548DT20060629223845.jpg";
var smallPic1 ="http://image2.sina.com.cn/book/U1503P167T135D1F4551DT20060629223845.jpg";
var smallPic2 ="http://image2.sina.com.cn/book/U1396P167T135D1F4554DT20060629141338.jpg";
var smallPic3 ="http://image2.sina.com.cn/book/U1396P167T135D1F4557DT20060628170108.jpg";
//大图的点击后的URL
var PicURL0 ="http://www.aijquery.cn";
var PicURL1 ="http://www.aijquery.cn";
var PicURL2 ="http://www.aijquery.cn";
var PicURL3 ="http://www.aijquery.cn";
//标题
var t0="111搞笑节目玩转世界杯》第9期:情陷解说门";
var t1="222音频:黄健翔激情解说搞笑版大全";
var t2="333Play Girl(络宝贝)X计划";
var t3="444《Memory》爱情是一个迷";
//描述
var describe0="小马出密探零零发前往德国世界杯现场,调查“解说门”事件真相……";
var describe1="黄健翔是认的中国足球评论员第一人;他,曾骄傲地宣称自己的解说就是行业标准……";
var describe2="你也能成为万千艳羡于一身的游戏MM,PlayGir X计划,将你打造成戏巅峰最耀眼的明星。";
var describe3="怎样的爱情可以真实地握在手中?这样的爱情真实还是虚幻?";
//
var t=t0+"[|]"+t1+"[|]"+t2+"[|]"+t3;
var bigPicURL=bigPic0+"[|]"+bigPic1+"[|]"+bigPic2+"[|]"+bigPic3;
var smallPicURL=smallPic0+"[|]"+smallPic1+"[|]"+smallPic2+"[|]"+smallPic3;
var PicURL=PicURL0+"[|]"+PicURL1+"[|]"+PicURL2+"[|]"+PicURL3;
var describe = describe0+"[|]"+describe1+"[|]"+describe2+"[|]"+describe3;
//
document.write("<object classid=‘clsid:d27cdb6e-ae6d-11cf-96b8-444553540000‘ codebase=‘http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0‘ width=‘535‘ height=‘356‘ ID=FSCommand NAME=‘focus_one‘ align=‘middle‘><param name=‘allowScriptAccess‘ value=‘sameDomain‘ /><param name=‘movie‘ value=‘/html/aijquery/inc/flashimg.swf‘ /><param name=‘FlashVars‘ value=‘bigPicURL=" + bigPicURL + "&smallPicURL=" + smallPicURL + "&t="+t+"&PicURL="+PicURL+"&describe="+describe+"‘/><param name=‘quality‘ value=‘high‘ /><param name=‘bgcolor‘ value=‘#ffffff‘ /><embed src=‘http://www.aijquery.cn/html/aijquery/inc/flashimg.swf‘ FlashVars=‘bigPicURL=" + bigPicURL + "&smallPicURL=" + smallPicURL + "&t="+t+"&PicURL="+PicURL+"&describe="+describe+"‘ quality=‘high‘ bgcolor=‘#ffffff‘ width=‘535‘ height=‘356‘ name=‘focus‘ swLiveConnect=‘true‘ align=‘middle‘ allowScriptAccess=‘sameDomain‘ type=‘application/x-shockwave-flash‘ pluginspage=‘http://www.macromedia.com/go/getflashplayer‘ /></object>");
</script>
</body>
</html>
View Code

 

图片来回切换的新闻展示效果

标签:mbed   down   lin   中国足球   世界   自己   ESS   相关   切换   

原文地址:https://www.cnblogs.com/1906859953Lucas/p/9139349.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!