html中图片如何自动切换？

html-css022

html中图片如何自动切换？,第1张

\x0d\x0avar curIndex=0\x0d\x0a//时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在Photos文件夹下。\x0d\x0avar timeInterval=1000\x0d\x0avar arr=new Array()\x0d\x0aarr[0]="photosǗ.jpg"\x0d\x0aarr[1]="photosǘ.jpg"\x0d\x0aarr[2]="photosǙ.jpg"\x0d\x0aarr[3]="photosǚ.jpg"\x0d\x0aarr[4]="photosǛ.jpg"\x0d\x0asetInterval(changeImg,timeInterval)\x0d\x0afunction changeImg()\x0d\x0a{\x0d\x0avar obj=document.getElementById("obj")\x0d\x0aif (curIndex==arr.length-1) \x0d\x0a{\x0d\x0acurIndex=0\x0d\x0a}\x0d\x0aelse\x0d\x0a{\x0d\x0acurIndex+=1\x0d\x0a}\x0d\x0aobj.src=arr[curIndex]\x0d\x0a}\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a自己修改一下就可以用了

一般是用脚本实现。示例：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">#bg_body{background:url(1.jpg) no-repeat center #eee background-attachment:fixed height:1000px}</style><script type="text/javascript">window.onload=function(){var oBody=document.getElementById('bg_body') var oS=oBody.style function BgChenge(){oS.backgroundImage='url(2.jpg)' } function BgPosition(){oS.backgroundRepeat='no-repeat' oS.backgroundPosition='center' oS.backgroundAttachment='fixed' } function LoadMethod(){BgChenge() BgPosition()} setInterval(LoadMethod,1000)}</script></head><body id="bg_body"></body></html>你背景图片就设置了一个2.jpg再切换也是这一张图片啊如果有多张图片比如说1-10.jpg，那就把oS.backgroundImage='url(2.jpg)'改为oS.backgroundImage='url('+(parseInt(Math.random() * 10) + 1)+'.jpg)'

1、首先输入代码：

<div class="wrapper">

<div id="focus">

<ul>

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li>

2、然后输入代码：

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/02.jpg" alt="QQ商城焦点图效果教程" /></a></li>

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/03.jpg" alt="jquery商城焦点图效果" /></a></li>

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/04.jpg" alt="jquery商城焦点图代码" /></a></li>

3、然后再输入代码：

<li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/05.jpg" alt="jquery商城焦点图源码" /></a></li>

</ul>

</div>

</div><!-- wrapper end -->

</body>

4、然后就完成了。