JS--切换图片总结

今天正好有时间，总结一下通过javascript来实现切换图片，可以通过以下几种方法实现：

方法一：实现简单的图片切换

可以自己配置,自己设置每张图片切换的时间间隔,自己设置每张图片的路径(绝对,相对路径都可以)

<html>

<head>

<title>例子1：实现简单的图片切换</title>

var curIndex=0;

//时间间隔单位毫秒

var timeInterval=1000;

var arr=new Array();

arr[0]="1.jpg";

arr[1]="2.jpg";

arr[2]="3.jpg";

setInterval(changeImg,timeInterval);

function changeImg()

{

var obj=document.getElementById("obj");

if (curIndex==arr.length-1)

{

curIndex=0;

}

else

{

curIndex+=1;

}

obj.src=arr[curIndex];

}

</script>

</head>

<body>

</body>

</html>

方法二：实现幻灯片切换图片

包含的二个JS文件中，包括关于adRotator所有函数的实现。

js文件下载地址：http://files.cnblogs.com/lily4064/CreateDiv-aaaaaa.js.rar

<html>

<head>

</head>

<body>

<tr>

<td>

</td>

</tr>

</table>

<!--

var hdImg = new Array();

for( var i = 0 ; i < 5 ; i++)

{

eval("hdImg[" + i + "] = document.forms[0].elements.hdImg" + (i+1) + ".value");

};

adRotator.initialize("AdRotator");

for( var i=0 ; i < hdImg.length ; i ++)

{

adRotator.add(hdImg[i]);

}

adRotator.play();

//-->

</SCRIPT>

</form>

</body>

</html>

方法三：js和flash结合的图片切换，例如现在好多网站上面的新闻切换，并可链接地址。

需要下载一个FLASH：http://files.cnblogs.com/lily4064/focus.rar

<html>

<head>

<title>js和flash切换图片</title>

</head>

<body>

imgUrl1="http://proimg.163.com/channel6/ebay/mail_145x90.jpg";

imgtext1="网页教学网制作素材"

imgLink1=escape("http://cimg2.163.com/cnews/2007/11/20/200711200904102880e.jpg");

imgUrl2="http://www.webjx.com/img/200406302.jpg";

imgtext2="网页教学网网页制作专区"

imgLink2=escape("http://www.webjx.com/htmldata/sort/3.html");

imgUrl3="http://www.webjx.com/img/200406303.jpg";

imgtext3="网页教学网网页特效专区"

imgLink3=escape("http://www.webjx.com/htmldata/sort/5.html");

imgUrl4="http://www.webjx.com/img/200406304.jpg";

imgtext4="网页教学网视频教程"

imgLink4=escape("http://www.webjx.com/htmldata/sort/15.html");

imgUrl5="http://www.webjx.com/img/200406305.jpg";

imgtext5="网页教学网网页制作书籍"

imgLink5=escape("http://www.webjx.com/htmldata/sort/7.html");

var focus_width=280

var focus_height=200

var text_height=18

var swf_height = focus_height+text_height

var pics=imgUrl1+"|"+imgUrl2+"|"+imgUrl3+"|"+imgUrl4+"|"+imgUrl5

var links=imgLink1+"|"+imgLink2+"|"+imgLink3+"|"+imgLink4+"|"+imgLink5

var texts=imgtext1+"|"+imgtext2+"|"+imgtext3+"|"+imgtext4+"|"+imgtext5

document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');

document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://www.webjx.com/js/focus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');

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

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

document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');

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

</script>

</span></a><span id="focustext" class="f14b"></span>

</body>

</html>

本文参考：

http://www.webjx.com/htmldata/2005-10-01/1128143647.html

http://www.mflady.com/space/index.php/126067/viewspace-21760

http://thcjp.cnblogs.com/archive/2006/07/25/434310.html （该BLOG里总结了大量的JS代码，可以参考学习）

转载于:https://www.cnblogs.com/lily4064/archive/2007/11/20/965741.html

JS--切换图片总结相关推荐

html简单的图片切换js,一分钟让你学会如何使用js切换图片
利用js实现简单的动画效果 js简介 JavaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. Java ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
使用html和js实现的一个简单小练习轮播图.大概功能主要是: 1.使用时间函数自动切换图片: 2.在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型 ...
Js实现图片点击切换与轮播
Js实现图片点击切换与轮播图片点击切换 <!DOCTYPE html> <html><head> <meta charset="UTF-8&quo ...
html原生轮播图的实现,使用原生js实现点击切换图片（轮播图）效果
要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签二.css样式设 ...
js图片切换（点击左右按钮，小圆点切换图片，自动轮播）
点击左右按钮,小圆点切换图片 <div><button><</button><button class="right">> ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
通过js实现图片左右点击图片左右切换效果
通过js实现图片左右点击图片左右切换效果通过图片左右的点击实现图片的左右切换,其实先看一下代码吧() 这边HT ...
简洁风个人主页（3） js背景图片随机切换
静态页面做完了,现在用js做一个背景图片随机切换的效果. 1.点击'个人网站'这个字样,实现body背景的切换.所以,首先获取这两个节点. var body = document.body; var ...
JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播
效果一: 会自动进行轮播,当鼠标进入轮播图区域会停止轮播,点击左右箭头可以向前.向后进行切换图片效果二: 这种效果比第一种效果简单,只要删除一些代码和修改一些样式即可. 实现原理轮播图整体是放在u ...

JS--切换图片总结

JS--切换图片总结相关推荐

最新文章

热门文章