JS焦点图片变换代码

原创 2007年10月10日 13:30:00

演示地址:www.we54.com/we54

显示执行的代码:

<SCRIPT>
var widths=313;
var heights=231;
var counts=5;

img1 = new Image();
img1.src = "http://bbs.we54.com/cms/upimg/litimg/071010/095024H038.gif";
url1 = new Image();
url1.src = "http://bbs.we54.com/bbs/focus/hotpic/20071010/8227.html";
img2 = new Image();
img2.src = "http://bbs.we54.com/cms/upimg/litimg/071010/0Z603M430.gif";
url2 = new Image();
url2.src = "http://bbs.we54.com/bbs/focus/hotpic/20071010/8203.html";
img3 = new Image();
img3.src = "http://bbs.we54.com/cms/upimg/litimg/071010/0T234MW0.gif";
url3 = new Image();
url3.src = "http://bbs.we54.com/bbs/focus/hotpic/20071010/8190.html";
img4 = new Image();
img4.src = "http://bbs.we54.com/cms/upimg/litimg/071009/0Z333G358.gif";
url4 = new Image();
url4.src = "http://bbs.we54.com/bbs/focus/hotpic/20071009/8049.html";
img5 = new Image();
img5.src = "http://bbs.we54.com/cms/upimg/litimg/071009/0U335M4Q.gif";
url5 = new Image();
url5.src = "http://bbs.we54.com/bbs/focus/hotpic/20071009/8044.html";

</SCRIPT>

<SCRIPT src="js/focus.js"></SCRIPT> 

 

focus.js文件:

var nn=1;
var key=0;
function change_img()
{if(key==0){key=1;}
else if(document.all)
{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}
eval('document.getElementById("pic").src=img'+nn+'.src');
eval('document.getElementById("url").href=url'+nn+'.src');
for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}
document.getElementById("xxjdjj"+nn).className='bxx';
nn++;if(nn>counts){nn=1;}
tt=setTimeout('change_img()',4000);}
function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
document.write('<style>');
document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('</style>');
document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
document.write('<div><a id="url"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">');
for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}
document.write('</div></div>');
change_img();

原生js实现焦点轮播图动态切换

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • YuMay2009
  • YuMay2009
  • 2016年06月03日 11:07
  • 948

JS实现八种焦点轮播图(上)

JS实现八种焦点轮播图(上)
  • macanfa
  • macanfa
  • 2016年01月03日 19:41
  • 1679

JS实现八种焦点轮播图(下)

JS实现八种焦点轮播图(下)
  • macanfa
  • macanfa
  • 2016年01月03日 20:23
  • 947

最简单的图片轮播--利用myfocus js焦点图库插件

图片轮播有很多种实现方式,可以借助于第三方插件,也可以手写js代码。这里说的是myfocus js焦点图库。 myFocus的标准风格使用,只需简单3步: 第一步: 在html的标签内引入myFoc...
  • qq_25821067
  • qq_25821067
  • 2016年07月06日 19:58
  • 879

Javascript基础(四):获得焦点和失去焦点事件

1.获取ID的函数在说获取焦点和失去焦点事件之前,先说说封装获取ID的函数。一般在实际操作中,会经常用到提取某个元素的ID,如果每条都列,想必非常麻烦。一般如果有很多ID需要提取的情况基本都用提取ID...
  • sinat_34647836
  • sinat_34647836
  • 2017年05月06日 19:13
  • 4110

最简单jquery实现带左右箭头和数字焦点的图片轮播

直接上代码(请自行引入jquery): 轮播 body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weigh...
  • boyit0
  • boyit0
  • 2016年11月18日 17:52
  • 1012

30款jQuery常用网页焦点图banner图片切换

1、jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动   查看演示   2、jquery幻灯片插件带滚动条的圆形立体图片旋转滚动   ...
  • china_skag
  • china_skag
  • 2014年02月25日 11:20
  • 32551

JS实现鼠标移入移出控制图片的切换效果

背景 在看专业英语的时候,学习JS的Timer Event.正好有一个例子,实现的是,图片自动切换,当鼠标点击图片的时候,停止切换。于是想要动手实践一下,并且添加上自己的想法。于是就有了下面的图...
  • u013035538
  • u013035538
  • 2016年03月26日 23:15
  • 5001

js图片轮播简单代码

一个较简单的js图片轮播网页特效,一张一张切换图片,就像放幻灯片一样,有渐变过渡效果。兼容IE,火狐等,图片路径定义在JavaScript代码内,请按顺序处理好所需图片,修改JS代码和CSS就可以了,...
  • smshuxue
  • smshuxue
  • 2014年02月07日 22:48
  • 828

几种js图片之间切换的方法整理

放了几种自己用到的js处理图片的方法,以免到时候用的时候忘记或者是可以直接用来复制粘贴方便一些。...
  • qq_28508217
  • qq_28508217
  • 2016年09月10日 00:03
  • 1166
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS焦点图片变换代码
举报原因:
原因补充:

(最多只允许输入30个字)