今日头条 焦点资讯 营销之道 企业报道 淘宝运营 网站建设 软件开发 400电话
  当前位置: 首页 » 资讯 » 网站建设 » 正文

一种图片轮转的链接效果

放大字体  缩小字体 发布日期:2013-04-12  浏览次数:61  【去百度看看】
核心提示:!-- 脚本说明: 第一步:把如下代码加入body区域中 第二步:改body语句为bodyonload=Carousel() -- bodyonload=Carousel() scriptty
  <!--
脚本说明: 
第一步:把如下代码加入<body>区域中
第二步:改<body>语句为 <body onload="Carousel()">
-->
<body onload="Carousel()">
 <script type="text/javascript">
// 7 variables to control behavior
 var Car_Image_Width=140;
 var Car_Image_Height=225;
 var Car_Border=true;  // true or false
 var Car_Border_Color="white";
 var Car_Speed=4;
 var Car_Direction=true;  // true or false
 var Car_NoOfSides=8;  // must be 4, 6, 8 or 12

/* array to specify images and optional links. 
 For 4 sided carousel specify at least 2 images
 For 6 sided carousel specify at least 3
 For 8 sided carousel specify at least 4
 For 12 sided carousel specify at least 6
 If Link is not needed keep it ""
*/
 Car_Image_Sources=new Array(
  "/uploadfile/UploadFile/2005512191328565.jpg",
"http://www.cctv.com",
  "/uploadfile/UploadFile/2005512191329891.jpg",
"http://www.cctv.com",
  "/uploadfile/UploadFile/2005512191329254.jpg",
"http://www.cctv.com", //this slide isn’t linked
  "/uploadfile/UploadFile/2005512191330842.jpg",
"http://www.cctv.com" // NOTE No comma after last line
  );

/***************** DO NOT EDIT BELOW **********************************/
 CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
 C_Coef=new Array(
  3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,
3*Math.PI/2,7*Math.PI/4, 0,
  Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,
Math.PI/6,Math.PI/3);
 var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:
Car_NoOfSides==8?5:9;
 C_Pre_Img=new Array(Car_Image_Sources.length);
 var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
 C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

 function Carousel(){
  if(document.getElementById){
   for(i=0;i<Car_Image_Sources.length;i+=2){
    C_Pre_Img[i]=new Image();
C_Pre_Img[i].src=Car_Image_Sources[i]}
   C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
   Car_Div=document.getElementById("Carousel");
   for(i=0;i<C_HalfNo;i++){
    CW_I[i]=document.createElement("img");
Car_Div.appendChild(CW_I[i]); 
    CW_I[i].style.position="absolute";
    CW_I[i].style.top=0+"px";
    CW_I[i].style.height=Car_Image_Height+"px";
    if(Car_Border){
     CW_I[i].style.borderStyle="solid";
     CW_I[i].style.borderWidth=1+"px";
     CW_I[i].style.borderColor=Car_Border_Color}
    CW_I[i].src=Car_Image_Sources[2*i];
    CW_I[i].lnk=Car_Image_Sources[2*i+1];
    CW_I[i].onclick=C_LdLnk;
    CW_I[i].onmouseover=C_Stp;
    CW_I[i].onmouseout=C_Rstrt}
   CarImages()}}

 function CarImages(){
  if(!C_Stppd){
   C_TotalW=0;
   for(i=0;i<C_HalfNo;i++){
    C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
    C_TotalW+=C_ClcW[i]}
   C_LeftOffset=(C_MaxW-C_TotalW)/2;
   for(i=0;i<C_HalfNo;i++){
    CW_I[i].style.left=C_LeftOffset+"px";
    CW_I[i].style.width=C_ClcW[i]+"px";
    C_LeftOffset+=C_ClcW[i]}
   C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
   if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
    if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
    if(Car_Direction){
     CW_I[C_HalfNo]=CW_I[0];
     for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
     CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
     CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
    else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
     CW_I[0]=CW_I[C_HalfNo];
     CW_I[0].src=Car_Image_Sources[C_CrImg];
     CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
    C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
  setTimeout("CarImages()",50)}

 function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
 function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
 function C_Rstrt(){C_Stppd=false}
</script>
<div id="Carousel" style="position:relative">
   <img src="http://www.qiye800.com/skin/default/image/lazy.gif" class="lazy" original=""http://jc.upschool.cn/upload/2006-10-18/2006101810571211519.gif"" width="371" height="225">
</div> 
 
长春  短信群发  吉林省  红视窗  中国  长春市  玉米  长春网站建设  网站  振华  设备  设计  吉林  广州  扑克  联合声明  叙利亚  美国  美国白宫  新闻中心  内蒙古  白宫  化学武器  指示  记者会  化武  塞内加尔  消费者权益  小雨  满洲里  叙政府  日本  北京市  中国政府  毒品  中消协  消费者  强台风  台风  非洲  中非合作论坛  圆桌  中非  长春上门维修电脑  大阪  海外网  经济  国家元首  突击步枪  重庆市  俄罗斯  网站建设  步枪  长春上门做系统  长春上门修电脑  长春北大青鸟  党委书记  政治  北斗导航  军民  龙头企业  长春电脑上门维修  党委  产业园  位置服务  售前咨询技巧  中国电影  制造  侯建国,质量,中国特色社会主义  AJAX  中国移动  中国智能建筑节  中国芯  长春国贸  PHP  中国军网  小米  RSS  f-35  美国人  政府  弹道导弹  战斗机  州长  一带一路  检察官  特朗普  塞申斯  中国市场  今日头条  特朗普,贸易战,美国  微博  XML  发布会  刘强东  英国皇家海军  运载火箭  航母  战机  中国空军 
 
[ 资讯搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 违规举报 ]  [ 关闭窗口 ]

 
0条 [查看全部]  相关评论

 
网站首页 | 关于我们 | 联系方式 | 使用协议 | 版权隐私 | 网站地图 | 排名推广 | 广告服务 | 积分换礼 | 网站留言 | RSS订阅 | 吉ICP备19006030号-4
企业800网 · 提供技术支持