2个js实现图片轮播效果（用）

第一个（使用）

不过要注意在web.config中将该location的位置的访问权限设为allow user="*",设置了deny user="?"或"*"将导致无法看到图片，今天费了一番功夫才发现之前设置的这个问题，造成管理员在freetexbox中上传图片时只看到有图片文件，但是看不到文件夹中的图片内容，修改后成功过通过）：

<div id="c_left" style=" left:0px; float:left; border:5px; border-color:Gray">

                               <SCRIPT language=JavaScript>
     
      </SCRIPT>

                               </div>

第二个(未用，因为会随页面缩放比例而丢失画面和文字)：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> 图片轮播 </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="水月洞天工作室">

<META NAME="Keywords" CONTENT="图片轮播">

<META NAME="Description" CONTENT="js实现图片轮播">

</HEAD>

<BODY>

<div id="c_flash"></div>

<script language="javascript">

linkarr = new Array();

picarr = new Array();

textarr = new Array();

var focus_width=359; // 图片的宽度

var focus_height=144; // 图片的高度

var text_height=20; // 底部文字的高度

var pics = "";

var links = "";

var texts = "";

var swf_height = focus_height+text_height; // 整个轮换效果的高度=图片高度+底部文字高度

var defJpeg = "http://www.cnbeta.com/images/index_37.jpg";

linkarr[1]="http://www.cnbeta.com/articles/73700.htm";picarr[1] ="../image/01.jpg";textarr[1]="专注的精神，是我们的一贯作风";

linkarr[2]="http://www.cnbeta.com/articles/73715.htm";picarr[2] ="../image/02.jpg";textarr[2]="我们的用心，换来你们的放心";

linkarr[3]="http://www.cnbeta.com/articles/73734.htm";picarr[3] ="../image/03.jpg";textarr[3]="与你们共享荣誉，是我们最大的骄傲";

linkarr[4]="http://www.cnbeta.com/articles/73473.htm";picarr[4] ="../image/04.jpg";textarr[4]="专业的技术，提供最舒心的服务";

for(i=1;i<picarr.length;i++){

if(pics=="") pics = picarr[i];

else pics += "|"+picarr[i];

}

for(i=1;i<linkarr.length;i++){

if(links=="") links = linkarr[i];

else links += "|"+linkarr[i];

}

for(i=1;i<textarr.length;i++){

if(texts=="") texts = textarr[i];

else texts += "|"+textarr[i];

}

document.write('<object type="application/x-shockwave-flash" data="../image/slide.swf" width="' + focus_width + '" height="' + swf_height + '">');

document.write('<param name="movie" value="../image/slide.swf"/>');

document.write('<param name="allowScriptAcess" value="sameDomain" />');

document.write('<param name="quality" value="best" />');

document.write('<param name="bgcolor" value="#E5ECF4" />');

document.write('<param name="scale" value="noScale" />');

document.write('<param name="menu" value="false">');

document.write('<param name="wmode" value="opaque" />');

document.write('<param name="FlashVars" value="playerMode=embedded&pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" />');

document.write('</object>');

</script>

</BODY>

</HTML>

说明：实现图片轮换效果的其实是一个flash,就是那个../image/slide.swf,真想看看他的源码,不知道他是怎么读取传进去的参数的哦!!!

要注意的时候图片和那个slide.swf必须在同一站点下（至于slide.swf，大家使用下载工具到http://www.cnbeta.com/template/slide.swf下载呗）,要不然就会显示出错了,比如上面的代码改成http://www.cnbeta.com/template/slide.swf后显示就不正常了（例如标题文字时有时无）!!!

图片只能使用JPG格式的，如果换成GIF格式的话则图片显示不出来！！！

2个js实现图片轮播效果（用）相关推荐

JS实现图片轮播效果（自动和手动）
本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS ...
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
纯js制作图片轮播效果
好久没有发博客了,最近都在复习,为了找工作做准备. 前段时间逛了下鼠绘漫画网追海贼王最新漫画,发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同,看起来更加有趣,于是我尝试了用js复写它. 前提 ...
html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
前端原生js实现图片轮播效果，超级简单，备注详细
原生js实现简单轮播图,效果如下纯生js实现轮播图链接: link. 图片: 我们可以通过左右两边的箭头来播放图片,在我们的鼠标放在图片上时,自动播放结束,转化为手动播放,可以通过小圆点来点击切换 ...
js实现图片轮播效果
感觉这一周学的东西中,本菜鸡觉得轮播效果是最炫酷的哈哈哈. 要好好的纪念下这个东西,以后忘了再来这边看看!超赞, 当自己做出这个效果的时候,很有成就感的(ノω<.)ノ))☆.. <!DOC ...
php中实现图片自动轮播,基于vue.js实现图片轮播效果
轮播图效果: html {{sd.title}} js export default { components: { }, ready: function() { var _this=this; va ...
移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...

2个js实现图片轮播效果（用）

2个js实现图片轮播效果（用）相关推荐

最新文章

热门文章