图片轮播！
Posted 一枚小兵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片轮播！相关的知识，希望对你有一定的参考价值。
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <style> 5 *{ 6 margin:0px auto; 7 padding:0px;} 8 .tuijian 9 { 10 width:1377x; 11 height:768px; 12 background-repeat:no-repeat;} 13 .page 14 { 15 bottom:200px; 16 background-color:#000; 17 background-position:center; 18 background-repeat:no-repeat; 19 width:94px; 20 height:165px; 21 opacity:0.5;} 22 #p1 23 { 24 background-image:url(QQ%E5%9B%BE%E7%89%8720160326142949.png); 25 float:left; 26 margin:-400px 0px 0px 10px;} 27 #p2 28 { 29 background-image:url(QQ%E5%9B%BE%E7%89%8720160326142934.png); 30 float:right; 31 margin:-400px 10px 0px 0px;} 32 </style> 33 </head> 34 35 <body> 36 <div class="tuijian" id="c" style="background-image:url(1384480949246.jpg)"></div> 37 <div class="page" id="p1" onclick="d(-1)"></div> 38 <div class="page" id="p2" onclick="d(1)"></div> 39 </body> 40 </html> 41 <script> 42 var jpg=new Array(); 43 jpg[0]="url(1384480949246.jpg)"; 44 jpg[1]="url(1403834403676.jpg)"; 45 jpg[2]="url(1449111255870.jpg)"; 46 var a=document.getElementById("c"); 47 var x=0;var n=0; 48 function huan() 49 { 50 x++; 51 if(x==jpg.length) 52 { 53 x=0;} 54 a.style.backgroundImage=jpg[x]; 55 if(n==0) 56 { 57 window.setTimeout("huan()",3000);} 58 } 59 function d(m) 60 { 61 n=1; 62 x=x+m; 63 if(x<0) 64 { 65 x=jpg.length-1;} 66 else if(x>=jpg.length) 67 { 68 x=0;} 69 a.style.backgroundImage=jpg[x];} 70 window.setTimeout("huan()",3000); 71 </script>
以上是关于图片轮播！的主要内容，如果未能解决你的问题，请参考以下文章