1、自动轮播
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片轮播--无限轮播</title> <style> #tuijian{ border:1px #000000 solid; width:640px; height:500px; background-repeat:no-repeat; left:300px; top: 200px; position: absolute; background-image:url(x.jpg); background-position: center; background-size: contain; } </style> </head> <body> <div id="tuijian"></div> </body> <script> var jpg =new Array(); jpg[0]="url(c.jpg)"; jpg[1]="url(d.jpg)"; jpg[2]="url(x.jpg)"; jpg[3]="url(z.jpg)"; var tjimg = document.getElementById("tuijian"); var xb=0; function huan() {xb++; if(xb == jpg.length) { xb=0; } tjimg.style.backgroundImage=jpg[xb]; window.setTimeout("huan()",2000); //实现无限循环图片，即轮播效果 } window.setTimeout("huan()",2000);//调用函数/方法 </script>
计算机按顺序依次读取程序代码，执行代码;
编写程序代码有两种思维方式，顺向/逆向。
2、自动、手动切换轮播
body代码:
<div id="tuijian"> <div class="pages" id="p1" onclick="dodo(-1)"></div> <div class="pages" id="p2" onclick="dodo(1)"></div> </div> <script> var jpg =new Array(); jpg[0]="url(qh/a.jpg)" jpg[1]="url(qh/sy.jpg)"; jpg[2]="url(qh/x.jpg)"; jpg[3]="url(qh/x.jpg)"; var tjimg = document.getElementById("tuijian"); var xb=0;var n=0; function huan() {xb++; if(xb == jpg.length) { xb=0; } tjimg.style.backgroundImage=jpg[xb]; if(n==0) { window.setTimeout("huan()",3000);} } //手动 function dodo(m) { n=1; xb = xb+m; if(xb < 0) {xb = jpg.length-1;} else if(xb >= jpg.length) {xb = 0;} tjimg.style.backgroundImage=jpg[xb]; } window.setTimeout("huan()",3000); </script>
css代码：
#tuijian{ width: 760px; height: 400px; left:300px; top: 200px; position: absolute; background-image:url(qh/0da5b6fd5266d016232cd2b3902bd40734fa35f5.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; } #p1{float:left; margin:170px 0px 0px 10px; position:absolute; background-image:url(qh/%E5%B7%A6.png); background-position:center;} #p2{ background-image:url(qh/%E5%8F%B3.png); margin-top: 170px; position: absolute; float: right; right:10px; }
我认为，努力，就够了！！！
原文：http://www.cnblogs.com/jinshui/p/5510338.html